Archived topic
Border on hover around images with zoom effect
3 replies · Started by qpaq on October 24, 2022
Viewing posts 1–4 of 4
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%);
}
Try this CSS:
.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);
border:2px solid transparent;
}
.imagezoom:hover img {
transform: scale(1.2);
filter: brightness(110%);
border:2px solid black;
}This didn't work out but the following did. I think the container has to be treated separately. Border didn't work but outline solved the problem.
.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.1);
filter: brightness(110%);
}
.imagezoom:hover,container {
outline: solid 2px black;
}Glad you figured it out.
This archived topic is closed to new replies.
