CSS size transition to stay inside parent div
- by IlyaD
I want to have an image frame that when I hove over it the image inside will zoom in a little (I am using size transition), but the frame will stay the same size.
What happens now that even if the frame has a fixed width and height it is stilled zoomed with the image
HTML:
<div class="img-wrapper">
<img class="thumbnail" src="http://placekitten.com/400/200">
</div>
and CSS
.img-wrapper {
width: 400px;
}
.thumbnail {
width: 400px;
}
.thumbnail {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover {
width: 500px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
http://codepen.io/pen/KCJny
