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

问题描述

我有 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...) 无济于事。

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

标签： htmlcssimagehover

您可以使用此代码

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

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

问题描述

解决方案

推荐阅读