如何使网格上的响应图像具有悬停图像转换？

如何解决如何使网格上的响应图像具有悬停图像转换？

我在响应式网格中有4张图像。我似乎无法弄清楚如何使每个图像具有悬停转换图像交换。我正在使用HTML / CSS。这是我的代码和想要交换的所需图像。试图营造一种幻觉，那就是走进美术馆，然后一步步靠近油画，以近距离观察它。我以为这将是一个简单的修复，但是到目前为止我发现的所有内容都具有绝对的定位，并且会破坏网格。

需要的图像进行交换

https://vivianeart.com/wp-content/uploads/2020/10/sarah3-1.png

https://vivianeart.com/wp-content/uploads/2020/10/scott.png

https://vivianeart.com/wp-content/uploads/2020/10/serena.png

https://vivianeart.com/wp-content/uploads/2020/10/shawn.png

我的代码

<!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;
}

</style>
<body>


<!-- 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"><a href="https://vivianeart.store/">Sarah Nordean</a></div>

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

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

</body>
</html>

非常感谢您的帮助！

如何使网格上的响应图像具有悬停图像转换？

如何解决如何使网格上的响应图像具有悬停图像转换？

相关推荐