Radasin• 620
@Radasin
Posted
Place an image inside an image:
html<img class="img"><img class="overlay" /></img>
css
.overlay {
display: none;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.img:hover .overlay {
display:block;
} ```
this should work i haven't tested it but it should work.
1
CRKNO• 50
@CriKno
Posted
@Radasin thank you so much!! I will try and I will tell you how it went.
0
Radasin• 620
@Radasin
Posted
@CriKno I tested it it doesnt work. This works. You need to wrap the img in a container then set the container position to relative, overlay img to position absolute top: 0; left: 0;
<div class="div">
<img class="img" src="1.jpg" alt="">
<img class="overlay" src="2.jpg" alt="">
</div>
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
z-index: 2;
opacity: 0.5;
}
.img {
width: 600px;
height: 600px;
}
.div {
position: relative;
width: 600px;
height: 600px;
}
.div:hover .overlay {
display: block;
max-width: 600px;
height: 600px;
}
Marked as helpful
1
CRKNO• 50
@CriKno
Posted
@Radasin I have it! I used a div container and position absolute and it work, I also change the opacity of the main image and the result is the same as in the design. Thanks for your help, It helped me a lot!
0
