Hi,
I understand that it’s rather hard to apply a border around an image if you want to apply a zoom effect at the same time.
My zoom effect works fine with the following CSS piece but I couldn’t make a border around the image when hovered. However, I’ve seen it on a site. (see linked). How can I apply a border on an image with zoom effect?
.imagezoom {
position: relative;
overflow: hidden;
}
.imagezoom img {
max-width: 100%;
transition: all 0.3s ease-in-out;
display: block;
width: 100%;
height: auto;
transform: scale(1);
}
.imagezoom:hover img {
transform: scale(1.2);
filter: brightness(110%);
}