Javascript 如何为我的图像库创建此悬停效果？

基本上，我已经创建了一个图像库，看起来像下面的代码。然而，我在创建与图像匹配的悬停效果时遇到了困难。如果可能的话，我希望悬停效果看起来像这样：。有人能帮我做这个吗？感谢您的帮助。谢谢

.cf:before、.cf:after{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
*，*：之前，*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
/*块级元素*/
.第页{
边际：0px；
填充：0px；
}
themains先生{
边际：0px；
填充：0px；
最大宽度：无；
}
.内部{
最大宽度：1000px；
保证金：自动；
左侧填充：15px；
右侧填充：15px；
}
.滚动容器{
位置：相对位置；
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
宽度：100%；
高度：400px；
滚动捕捉类型：必填；
滚动行为：平滑；
背景#2C3E50；
边框：实心7px黄色；
字体大小：0px；
边缘底部：50px；
}
.滚动容器.滚动部分{
显示：内联块；
垂直对齐：中间对齐；
背景：透明；
边框：实心5px#BFC9CA；
空白：nowrap；
}
/*滑块X（不同大小的图像）*/
.scroll-container.diff-size{
滚动快照目标：50%0%；
填充：20px 0px；
}
.scroll-container.diff-size.scroll节{
宽度：自动；
身高：100%；
右边距：15px；
滚动捕捉坐标：50%0%；
}
.scroll-container.diff-size.滚动部分：第一个子项{
滚动捕捉坐标：0%0%，50%0%；
左边距：15px；
}
.scroll-container.diff-size.滚动部分：最后一个子项{
滚动捕捉坐标：50%0%，100%0%；
}

画廊
水平卷轴画廊

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

.overlay{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：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);
      }
    

---

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

你至少应该尝试自己编写代码。我建议你做一些事情，或者通过谷歌或者通过搜索来尝试。如果你仍然有问题，请带着代码回来解释你所做的尝试。