Marcos Furquim Marcos Furquim - 4 months ago 47
CSS Question

Zoom image with CSS3 with parent div have border radius overflow

i try to use zoom image(scale CSS3) animation when mouse hover the image, but i have a problem with overflow during the animation, i want use tag

<img>
because i want put background color besides the image(have background transparency)

this is my problem:

HTML:

<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>


CSS:

.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}

.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
}

.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}


https://jsfiddle.net/j1rdv968/

anyone know a solution?

ps. sorry my english.

Answer

You can keep the transforming image inside of the .divIMG div by giving it a position: relative;, and a higher z-index than its child image.

CSS

.thumbnail div.divIMG {
  z-index: 3;
  position: relative;
}

.thumbnail img {
  z-index: 2;
}

.thumbnail {
    margin-top: 20px;
}
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.thumbnail div.divIMG {
  border-radius: 50%;
  border: 4px solid #08456f;
  width:200px;
  height:200px;
  overflow:hidden;
  margin: 0 auto;
  z-index: 3;
  position: relative;
}

.thumbnail img {
  background-color: #c3d3de;
  width: 100%;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
  z-index: 2;
}
.thumbnail div.divIMG:hover img {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}
<div class="thumbnail">
						<div class="divIMG">
							<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
						</div>
					</div>

JSFiddle

Comments