带循环的前后图像

Question

我需要在鼠标悬停时显示前后图像。我确实编辑了 w3schools 图像效果的代码。并提出了 CSS。一个包含前后图像的对象。它有效但是当有两个对象时，第二个对象“之后”图像显示。在第一个对象“之后”图像位置。因为只能有一个类（覆盖）被使用两次（因为循环）。只有第一个类（叠加）地点。将用于所有进一步的“后”图像。如何让后图像显示在自己的位置？感谢 任何信息或建议

 <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

这是因为您拥有相对位置的 containerImage，它是所有图像的唯一包装器。

这会导致所有绝对元素从 top:0, left:0 开始，从第一个具有相对位置的父级开始，在你的例子中是 containerImage。

您可以创建多个 containerImage 并将其带入 foreach 循环：

        @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>
          }

并删除 br，因为 div 的默认显示设置为阻止。

这样您就不必更改 CSS。或者，如果您不能引入 div containerImage。只需创建另一个 div（将其命名为 inner-wrapper 并赋予其相对位置）。

我创建了一个有效的codepen。

希望对您有所帮助！