CODEWITHSUNDEEP
css
xRobot
xRobot

Reputation: 26565

CSS3 Zoom animation with border-radius

I need a way to make a zoom animation with CSS3 in a div with border-radius. But as you can see below, it doesn't work well:

enter image description here

Working Code: https://jsfiddle.net/n5owxmch/

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 21s;
  -webkit-transition: all 21s;
  transition: all 21s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

HTML:

<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

Is there a way to fix that ?

Upvotes: 1

Views: 1125

Answers (1)

adricadar
adricadar

Reputation: 10219

From my research I reproduced this just in Chrome (Edge and Firefox works fine). To solve it I added z-index and vendor prefixes for border-radius see below .

Prioritize the .item by adding z-index: 100; and deprioritize the image with z-index: 0;. Basically this will enforce the image to be under the .item.

And I added vendor-prefixes (-moz- and -webkit-) for border-radius:

  -moz-border-radius:10px; /* add this */
  -webkit-border-radius: 10px; /* add this */

See snippet:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  z-index: 100; /* add this */
  position: relative;
  
  -moz-border-radius:10px; /* add this */
  -webkit-border-radius: 10px; /* add this */
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;
  z-index: 0; /* add this */
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

Upvotes: 2

Related Questions