javascript - HTML - CSS - 响应式相同尺寸的图像网格，悬停时出现框

Question

我正在尝试创建一个图像网格，当每个图像悬停时，该图像上会出现一个带有链接的框。

到目前为止，我已经使网格响应，但是，当我将指针悬停在每个图像上时，我发现很难向每个图像显示一个框。

下图更好地解释了它:

有什么帮助吗？

HTML:

<?php
$arrayImg = [1, 2, 3, 4, 5, 6, 7, 8 , 9 , 10, 11, 12, 13, 14, 15];
?>

  <div id="pattern" class="pattern">
    <ul class="g">

  <?php foreach ($arrayImg as $offerV) { ?>

            <li>
                <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
                <div class="offerSocial"><div>
            </li>

    <?php } ?>

        </ul>
    </div>

CSS:

<style>

        .offerImg {
            -webkit-transition: 550ms ease-in-out;
            -moz-transition: 550ms ease-in-out;
            -o-transition: 550ms ease-in-out;
            -ms-transition: 550ms ease-in-out;
            transition:  550ms ease-in-out;
        }
        .offerImg:hover {

            filter: blur(1px) grayscale(100%);
            -webkit-filter: blur(1px) grayscale(100%);
            -moz-filter: blur(1px) grayscale(100%);
            -o-filter: blur(1px) grayscale(100%);
            -ms-filter: blur(1px) grayscale(100%);
        }

        .offerSocial{
            width: 100%;
              height: 100%;
              position: relative;
              top: 0;
              left: 0;
              background-color: rgba(0,0,0,0.5);

        }

        .g {
            position: relative;
            padding: 0.25em;
            overflow: hidden;
            border: 1px solid black;
            width: 100%;
            left: -50px;
        }
        .g li {
            float: left;
            width: 50%;
            padding: 0.25em;
            list-style-type: none;
            border: 1px solid black;
        }
        .g img {
            display: block;
        }
        .g li:nth-child(odd) {
            clear: left;
        }



        @media screen and (min-width: 40em) {
            .g li {
                width: 33.3333333333333333%; 
            }
            .g li:nth-child(3n+1) {
                clear: left;
            }
            .g li:nth-child(odd) {
                clear: none;
            }
        }
        @media screen and (min-width: 55em) {
            .g li {
                width: 33.3333333333333333%; 
            }
            .g li:nth-child(3n+1) {
                clear: left;
            }
            .g li:nth-child(odd) {
                clear: none;
            }
        }
        @media screen and (min-width: 72em) {
            .g li {
                width: 33.3333333333333333%; 
            }
            .g li:nth-child(3n+1) {
                clear: left;
            }
            .g li:nth-child(odd) {
                clear: none;
            }
        }
        @media screen and (min-width: 90em) {
            .g li {
                width: 33.3333333333333333%; 
            }
            .g li:nth-child(3n+1) {
                clear: left;
            }
            .g li:nth-child(odd) {
                clear: none;
            }
        }
</style>

Answer 1

我想这就是你所追求的。您必须将 li 包装器设置为 position:relative 并绝对定位叠加层。

* {
  box-sizing: border-box;
}

li {
  position: relative;
  background: white;
}

.offerImg {
  -webkit-transition: 550ms ease-in-out;
  -moz-transition: 550ms ease-in-out;
  -o-transition: 550ms ease-in-out;
  -ms-transition: 550ms ease-in-out;
  transition: 550ms ease-in-out;
}

.offerImg:hover {
  filter: blur(1px) grayscale(100%);
  -webkit-filter: blur(1px) grayscale(100%);
  -moz-filter: blur(1px) grayscale(100%);
  -o-filter: blur(1px) grayscale(100%);
  -ms-filter: blur(1px) grayscale(100%);
}

.offerSocial {
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  opacity: 0;
  transition: all .5s ease;
}

li:hover .offerSocial {
  transform: translateY(0%);
  opacity: 1;
}

.g {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
}

.g li {
  float: left;
  width: 50%;
  padding: 0.25em;
  list-style-type: none;
  border: 1px solid black;
}

.g img {
  display: block;
  max-width: 100%;
  height: auto;
}

.g li:nth-child(odd) {
  clear: left;
}

@media screen and (min-width: 40em) {
  .g li {
    width: 33.3333333333333333%;
  }
  .g li:nth-child(3n+1) {
    clear: left;
  }
  .g li:nth-child(odd) {
    clear: none;
  }
}

@media screen and (min-width: 55em) {
  .g li {
    width: 33.3333333333333333%;
  }
  .g li:nth-child(3n+1) {
    clear: left;
  }
  .g li:nth-child(odd) {
    clear: none;
  }
}

@media screen and (min-width: 72em) {
  .g li {
    width: 33.3333333333333333%;
  }
  .g li:nth-child(3n+1) {
    clear: left;
  }
  .g li:nth-child(odd) {
    clear: none;
  }
}

@media screen and (min-width: 90em) {
  .g li {
    width: 33.3333333333333333%;
  }
  .g li:nth-child(3n+1) {
    clear: left;
  }
  .g li:nth-child(odd) {
    clear: none;
  }
}

<div id="pattern" class="pattern">
  <ul class="g">
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
    <li>
      <img class="offerImg" src="https://images.hertz.com/content/US/exceptions/SunnyRoad_600x225.jpg" alt="Product Name" />
      <div class="offerSocial">
        <div>
    </li>
  </ul>
  </div>

Codepen Demo