before and after image with loop - html

Question

I need to display a before and after images on mouse hover.I did edit the code from w3schools image effects.and come up with the CSS.With one Object Containing the before and after image. it works But when there two objects the 2nd Object "after" image displays .in the 1st Object "after" image place.since there can only be one class (Overlay) been used twice(because of the loop) .only the first class(overlay) place.will be used for all further "After" images.How do I get the after image to display with in its own place? thanks for
any information or advice
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
#foreach (var item in Model.Take(2))
{
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
<br/>
}
</div>
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
<img src="https://images.pexels.com/photos/52533/orange-fruit-vitamins-healthy-eating-52533.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
<img src="https://images.pexels.com/photos/566888/pexels-photo-566888.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
</div>
<hr/>
<p>The actual "after image" of the Orange but the Strawberry "after image" is showing</p>
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb"class="image" alt="Avatar">

Answer 1

This is because you have the containerImage with position relative and it is the only wrapper for all images.
This causes all the absolute elements to start at top:0, left:0, from the very first parent with position relative, in your case containerImage.
You can create multiple containerImage and bring it inside the foreach loop:
#foreach (var item in Model.Take(2)){
<div class="containerImage">
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
</div>
}
And remove the br, since divs has a default display set to block.
Like this you don't have to change your CSS. Alternatively if you can't bring in the div containerImage. Just create another div (name it something like inner-wrapper and give it position relative).
I've created a working codepen.
Hope this helps you!