My image wrapper is designed to hide overflow when hovered over. It works well in Firefox and Opera, but Chrome displays it strangely.
I've created a 10-second screen recording to demonstrate the issue.
Watch it here:
I also tested it on JSFiddle, where it behaves as expected:
CSS Code:
.carousel-cell {
padding: 40px;
}
.carousel img {
display: block;
height: calc((100vh / 1.6) - 34px);
}
.carousel {
margin-top: calc((100vh / 1.6) - (50vh - 57px));
}
.portfolioHover {
overflow: hidden;
}
.portfolioHover img {
-webkit-transition : 20s ease;
-moz-transition : 20s ease;
-ms-transition : 20s ease;
transition: 20s ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.carousel-cell {
overflow: hidden;
}
.carousel-cell:hover .portfolioHover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}