如何为我的图片库创建这种悬停效果？答案

【问题标题】：How can I create this hover effect for my image gallery?如何为我的图片库创建这种悬停效果？
【发布时间】：2021-08-21 18:11:56
【问题描述】：

基本上，我创建了一个类似于以下代码的图片库。但是，我无法创建与图像一起使用的悬停效果。如果可能的话，我希望悬停效果看起来像这样：https://codepen.io/jguerra/pen/rNBdYeJ。谁能帮我创建这个？任何帮助表示赞赏。谢谢。

.cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*block level elements*/

.page {
    margin: 0px;
    padding: 0px;
}
.themains {
    margin: 0px;
    padding: 0px;
    max-width: none;
}
.inner {
    max-width: 1000px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.scroll-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    height: 400px;
    scroll-snap-type: mandatory;
    scroll-behavior: smooth;
    background: #2C3E50;
    border: solid 7px yellow;
    font-size: 0px;
    margin-bottom: 50px;
}
.scroll-container .scroll-section {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: solid 5px #BFC9CA;
    white-space: nowrap;
}
/*Slider X (different sized images)*/

.scroll-container.diff-size {
    scroll-snap-destination: 50% 0%;
    padding: 20px 0px;
}
.scroll-container.diff-size .scroll-section {
    width: auto;
    height: 100%;
    margin-right: 15px;
    scroll-snap-coordinate: 50% 0%;
}
.scroll-container.diff-size .scroll-section:first-child {
    scroll-snap-coordinate: 0% 0%, 50% 0%;
    margin-left: 15px;
}
.scroll-container.diff-size .scroll-section:last-child {
    scroll-snap-coordinate: 50% 0%, 100% 0%;
}

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Gallery</title>
    <meta charset="UTF-8">
    <title>Horizontal Scroll Gallery</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <article class="page">
        <article class="themains">
            <div class="scroll-intro" id="intro"></div>
            <div class="inner">
                <div class="scroll-container diff-size"><img class="scroll-section" src="https://cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280.jpg"></div>
            </div>
            <p><br>
            <br></p>
        </article>
    </article><!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
    </script>
</body>
</html>

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript html css hover

【解决方案1】：

尝试使用 after 和 before 伪元素来制作白色边框线并为图像提供蓝色（或您想要的颜色）背景。您可以使所有它们不可见并且不透明度为 0。当悬停时，您可以使它们再次可见。检查下面的这个 css。

figcaption {
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 4rem;
    text-align: center;
   }
    figcaption::before,
    figcaption::after {
      content: '';
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      bottom: 1.5rem;
      left: 1.5rem;
      transition: 0.5s;
    }
    
    figcaption::before {
      border-top: 1px solid white;
      border-bottom: 1px solid white;
      transform: scale(0,1);
    }
    
    figcaption::after {
      border-right: 1px solid white;
      border-left: 1px solid white;
      transform: scale(1,0);
    }
    figcaption:hover::before,figcaption:hover::after{
     transform: scale(1);
      }

你可以用文字不透明度做同样的事情。

【讨论】：

【解决方案2】：

我可能会将图像放置在容器中并在 css 中使用以下类型的代码。希望它以某种方式有所帮助。

.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;

【讨论】：