带有鼠标悬停效果的CSS图像网格

Question

带有鼠标悬停效果的CSS图像网格

3

我正在尝试创建一个简单的图像网格，并希望为每个图像添加悬停效果。我希望效果是转换为不同的图像。到目前为止，我的图像网格已经正常工作，但是在添加悬停效果时，它要么影响整个列使图像消失，要么用于转换的图像覆盖整个网格。任何关于此的帮助将不胜感激。

这是我迄今为止使用的代码：

* {
  box-sizing: border-box;
}

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

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

<!-- Header -->
<div class="header">
 
</div>

<!-- Photo Grid -->


<div class="row">
  <div class="column">
    <img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" style="width:100%">

    <img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" style="width:100%">
   
  </div>
 
 
  <div class="column">
    <img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" style="width:100%">
  </div>
 
 
  <div class="column">
    <img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1vdVGVohUrDrkjoOHAi2QFwLDFypdkRR8" style="width:100%">
  </div>
 
 
  <div class="column">
    <img src="https://drive.google.com/thumbnail?id=1veQWJj6J3_NW48y4-_cTr2PeO9mhcktm" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1OFAR6Dh3vMJ7DQnkm4TVky3iBDada5iY" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1XRwvxsxI8N32HT-XETAxt82j6EA30jF2" style="width:100%">
  </div>
 
 
   <div class="column">
    <img src="https://drive.google.com/thumbnail?id=1J1ctFtgHtd0G5gddcZzsSuM-eUpiWsOQ" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1-oD6Rc5q5Xzq6Qt-FJdfh7pMZo165m3Z" style="width:100%">
   
    <img src="https://drive.google.com/thumbnail?id=1I-zlWhtolgyH_Ewr3F239maUizVjtJRM" style="width:100%">
  </div>
</div>

- user15003353

https://codepen.io/KJ618/pen/ZEpmLPE - user15003353

我已经向您发送了一个链接，展示我目前正在处理的内容。 - user15003353

@user15003353，您能否提供更多关于您想要实现的悬停过渡效果的详细信息或示例？ - Kyojimaru

谢谢你的帮助！这很类似！ - user15003353

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade - user15003353

但是，与其淡出到文本，不如淡出到另一张图片。 - user15003353

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- trickymind · Accepted Answer

CSS的transition属性可以帮助您实现这一点。
您还可以使用CSS的grid来创建网格布局。

查看示例代码。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 1rem;
  justify-content: center;
}

.cell {
  width: auto;
  height: 220px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.content {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  transition: 0.5s ease;
}

.cell .content:last-child:hover {
  opacity: 0;
}
.content>img{
    width:100%;
}

<div class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" />
    </div>
  </div>
  <div class="cell">
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" />
    </div>
    <div class="content">
      <img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" />
    </div>
  </div>
</div>