0

enter image description hereWhen you hover, the edges of the borders become square, then they are rounded. In mozilla everything is ok. How to fix this bug?

.advantage {
 display: flex;
 align-items: flex-end;
 padding: 16px;
 background: #D8DCE3;
 border-radius: 20px;
 overflow: hidden;
  height: 100px;
  width: 300px;
  position: relative;
}

.advantage img {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .3s;
  filter: grayscale(100%);
  border-radius: 10px;
    object-fit: cover;
    height: 100%;
    width: 100%;
 }
 
.advantage:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
}
<div class="advantage">
 <img src="https://tympanus.net/Development/DistortionHoverEffect/img/Img22.jpg" alt="">
</div>
z_u_l
  • 55
  • 1
  • 8
  • what do you realy want to do. – Sooraj Abbasi Nov 07 '19 at 17:25
  • On hover borders become square then they are rounded. It's bug in chrome browser. I want to fix that. I added a gif in question – z_u_l Nov 07 '19 at 17:30
  • Does this answer your question? [Transition on transform with border radius and overflow hidden doesn't work in Safari](https://stackoverflow.com/questions/25891362/transition-on-transform-with-border-radius-and-overflow-hidden-doesnt-work-in-s) – Giorgio.dev Nov 07 '19 at 18:02
  • @Giorgio.dev Thank you. It works. – z_u_l Nov 07 '19 at 18:15

0 Answers0