在网格布局中设置图像以在悬停时更改答案

【问题标题】：Setting images in a grid layout to change on hover在网格布局中设置图像以在悬停时更改
【发布时间】：2019-10-19 20:19:09
【问题描述】：

我有 4 张照片的网格布局，我需要将它们设置为在悬停时更改。

我可以使用 'img:hover' 和 'position: absolute;' 对一张图像执行此操作但是对于多张图片，绝对定位会打乱布局。

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row">
  <div class="column">
    <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
  </div>
</div>

这是我到目前为止的代码，我尝试在 CSS 中添加 background(url...) 无济于事。

任何帮助/指导将不胜感激，非常感谢！

【问题讨论】：

标签： html css image hover

【解决方案1】：

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      padding: 20px;
      font-family: sans-serif;
      background: #f2f2f2;
      margin: 0;
    }
    
    img {
      width: 100%;
      height: auto;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      grid-gap: 1em;
    }
    /* hover styles */
    
    .location-listing {
      position: relative;
    }
    
    .location-image {
      line-height: 0;
      overflow: hidden;
    }
    
    .location-image img {
      filter: blur(0px);
      transition: filter 0.3s ease-in;
      transform: scale(1.1);
    }
    
    .location-title {
      font-size: 1.5em;
      font-weight: bold;
      text-decoration: none;
      z-index: 1;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity .5s;
      background: rgba(90, 0, 10, 0.4);
      color: white;
      /* position the text in t’ middle*/
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .location-title:hover {
      color: #ffffff;
      text-decoration: none;
    }
    
    .location-listing:hover .location-title {
      opacity: 1;
    }
    
    .location-listing:hover .location-image img {
      filter: blur(2px);
    }
    /* for touch screen devices */
    
    @media (hover: none) {
      .location-title {
        opacity: 1;
      }
      .location-image img {
        filter: blur(2px);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="child-page-listing">
      <div class="grid-container">
        <article id="3685" class="location-listing">
          <a class="location-title" href="#">San Francisco</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"></a>
          </div>
        </article>
        <article id="3688" class="location-listing">
          <a class="location-title" href="#">London</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london"></a>
          </div>
        </article>
        <article id="3691" class="location-listing">
          <a class="location-title" href="#">New York</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york"></a>
          </div>
        </article>
        <article id="3694" class="location-listing">
          <a class="location-title" href="#">Cape Town</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town"></a>
          </div>
        </article>
        <article id="3697" class="location-listing">
          <a class="location-title" href="#">Beijing</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing"></a>
          </div>
        </article>
        <article id="3700" class="location-listing">
          <a class="location-title" href="#">Paris</a>
          <div class="location-image">
            <a href="#"><img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris"></a>
          </div>
        </article>
      </div>
      <!-- end grid container -->
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案2】：

解决方案是添加上面 Lalji 建议的代码，以便相应地将样式应用于图像。

【讨论】：

【解决方案3】：

您可以通过 css 使用 Overlay。请检查这个..它会为你工作

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">111<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">222<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">333<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">444<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

</body>
</html>

【讨论】：

【解决方案4】：

试试

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
    <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
</div>

CSS

*{
  box-sizing:border-box;
}
.column {
  float: left;
  width: 50%;
  padding: 5px;
  position:relative;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.hover-img{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.column:hover img + img{
  display:block;
}

https://jsfiddle.net/lalji1051/jhrpfq8u/4/

【讨论】：

这可行，但我似乎无法找到确保悬停图像保持相同大小的方法？目前，即使宽度设置为 100%，它也会稍微变大...
废话，5px 填充也只需要添加到悬停图像中。非常感谢 Lalji 的帮助。