Ermac Ermac - 6 months ago 24
CSS Question

Scale image inside a responsive container

So I'm developing a mobile friendly layout with squares and rectangles only. It has thumbnails with pictures and captions. To make that more visually dynamic I wanted to make a hover effect on the thumbnails.

The problem is, that the

img
container is a responsive object, and when it scales to make a zoom-in effect, it also scales it's container

Is it any way con scale the
img
only and not it's container?

This is the undesired effect I've got so far:



.tile{
position: relative;
width: 50%;
float: left;
background-size: 100%;
background-repeat: no-repeat;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.tile:after{
content: "";
display: block;
padding-top: 100%;
}


.tile img {
display: block;
position: absolute;
transition: all .4s ease;
}

.tile:hover img {
transform: scale(1.5);
}

<div class="tile">
<img src="http://p2.trrsf.com/image/fget/cf/600/600/images.terra.com/2013/10/16/2014-range-rover-evoque.jpg" />
</div>





Help is really appreciated!

Answer

Add overflow:hidden to your tile class.