如何在不破坏代码的情况下添加悬停图像过渡？

如何解决如何在不破坏代码的情况下添加悬停图像过渡？

我将一些HTML / CSS放在一起，以便在Squarespace上自定义内容块。内联浮动4张图片。我想将鼠标悬停在图像上并使其淡入另一张图像，从而产生缩小的幻觉。每当我尝试实现命令来执行此操作时，都会中断它。新图像不在现有图像上居中，在某些情况下，会在页面上找到新位置。我想保持当前结构不变。

有人可以帮我添加新代码来实现这一目标吗？

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}


.column {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}


@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}


@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

div.desc {
    padding: 15px;
    text-align: center;
}

<!-- Photo Grid -->
<div class="row">
    <div class="column">
        <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%">
        <div class="desc">Sarah Nordean</div>

    </div>
    <div class="column">
        <img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
        <div class="desc">Scott Everingham</div>

    </div>
    <div class="column">
        <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
        <div class="desc">Serena Beaulieu</div>

    </div>
    <div class="column">
        <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
        <div class="desc">Shawn Evans</div>

    </div>
</div>

解决方法

更新：这是在给定代码下如何使一个图像淡入另一个图像的答案。

我发现使用给定的换卡代码会导致鼠标悬停闪烁，因此我对其进行了一些更改，以便使现有的主代码保持原样，但每个img都包装在div中。这具有将被淡入的图像作为背景图像。添加了一些CSS，以便在悬停时从不透明过渡到

这是完整的代码，如上面问题中给出的问题所示：

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}


.column {
  -ms-flex: 25%; 
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}


@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
div.desc {
  padding: 15px;
  text-align: center;
}
/* ADDED CSS */
div.background {
  width:100%;
  height:auto;
  background-position: 0px 8px;
  background-repeat:no-repeat no-repeat;
  background-size:contain;
  margin: 0;
  padding: 0;
}
img { opacity : 1; transition:opacity 0.3s; }
img:hover { opacity : 0;}
</style>
<body>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png);"> 
      <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%;">
    </div>  
    <div class="desc">Sarah Nordean</div>
  </div>
  <div class="column">
    <div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png);">
      <img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
    </div>
    <div class="desc">Scott Everingham</div>
  
  </div>  
  <div class="column">
    <div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png);">
      <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
    </div>
    <div class="desc">Serena Beaulieu</div>

  </div>
  <div class="column">
    <div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png);">
      <img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
    </div>
    <div class="desc">Shawn Evans</div>
   
  </div>
</div>

</body>
</html>

这是此答案文章中的原始文本，需要澄清。这并不是声称要提供答案，而是要求澄清某些注释中无法完成的代码。

这里是Al Taljana在注释中添加的代码-由我输入背景色来代替实际图像。您能否验证这是您想要的效果-基本上只是将一个图像更改为另一个图像？（运行代码段并将鼠标悬停在矩形上。）

 .card { width: 130px; height: 195px; background: url("images/card-back.jpg") no-repeat; display: inline-block; background-color:magenta; }
 .card:hover { background: url("images/card-front.jpg") no-repeat; background-color: cyan; }

 <div class="card">
 </div>

现在，我不太确定您要使用的确切图像是什么，但是这里有一个模板说明其代码如何工作。

img {
    transition: all linear 0.7s;
}

.box {
    position: relative;

}

img.hover-img {
    position: absolute;
    opacity: 0;
}

.box:hover img.hover-img {
    opacity: 1;
}

<div class="box">
    <img class="hover-img" src="https://www.redbridgenet.com/wp-content/uploads/html5.png" alt="Image name"
        width="300" height="300">
    <img src="https://wwwtalks.com/wp-content/uploads/2017/11/logo-2582748_640-300x300.png" alt="Image name" width="300" height="300">
</div>

如何在不破坏代码的情况下添加悬停图像过渡？

如何解决如何在不破坏代码的情况下添加悬停图像过渡？

解决方法

相关推荐