Attempting to implement a hover effect on an image, I've encountered an issue.
It seems to work fine in Firefox:
https://i.sstatic.net/J5LZf.png
However, in Chrome, there appears to be a problem:
https://i.sstatic.net/99sdN.png
Below is the code I am using:
<div class="photo">
<img src="images/photo.jpg" alt="">
</div>
.photo {
width: 200px;
height: 200px;
border: 10px solid $white-color;
overflow: hidden;
position: absolute;
bottom: -50px;
left: calc(50% - 110px);
@include border-radius(50%);
img {
max-width: 100%;
height: auto;
@include scale(1);
@include transition(.3s ease-in-out);
&:hover {
@include scale(1.2);
}
}
}