Есть логотип, размером 256х256. И есть 2псевдоэлемента before и after, которые увеличивают логотип и при ховрее уменьшают его.
Но эти псевдоэлементы увеличивают ширину и высоту родителя на процент увеличения который им установлен. Как избежать этого, и сделать что бы ховер работа ТОЛЬКО при наведении на родителя блок?
a.logo{
display: block;
width: 256px;
height: 256px;
max-width: 256px;
max-height: 256px;
background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top;
outline: 1px solid lime;
position: relative;
}
a.logo::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 256px;
height: 256px;
background: url(http://i665.photobucket.com/albums/vv20/Davidmj444/Lion_256x256.png) no-repeat center top;
transform: scale(1.3) rotate(30deg);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ie-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.logo:hover::after {
transform: scale(1) rotate(0deg);
}
<a href="" class="logo"></a>