Ermac Ermac - 1 year ago 114
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

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
only and not it's container?

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

position: relative;
width: 50%;
float: left;
background-size: 100%;
background-repeat: no-repeat;
-webkit-transition: all .4s ease;
transition: all .4s ease;
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="" />

Help is really appreciated!

Answer Source

Add overflow:hidden to your tile class.