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

【问题标题】：How do I add a hover image transition without breaking my code?如何在不破坏代码的情况下添加悬停图像过渡？
【发布时间】：2021-02-06 23:33:17
【问题描述】：

我将一些 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>

【问题讨论】：

你能更清楚地解释你到底想要什么吗？
在 CSS 中更改悬停图像
我需要对每张图片执行这段代码。
我已将您评论中的代码放入答案 sn-p 中（因为我无法将 sn-p 放入评论中）。你能看看并检查这是你想要的效果吗？显示的 4 张图片后面的图片在哪里？

标签： html css image hover

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

我发现使用给定的换卡代码会导致悬停时闪烁，因此我对其进行了轻微更改，以便现有的主代码保持原样，除了每个 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 在评论中添加的代码 - 我使用背景颜色代替实际图像。您能否验证这是您想要的效果 - 基本上只是将一张图像更改为另一张图像？（运行 sn-p 并将鼠标悬停在矩形上）。

 .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>

【讨论】：

是的，非常感谢！我必须修复我的代码，因为它没有响应，我会更新。