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

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

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

declare @table_name nvarchar(255)
declare @qry nvarchar(max)
declare @subject nvarchar(max)
declare @body nvarchar(max)



set @table_name='tmp.temp_table'

select @qry='select * from database_name.' + @table_name



EXEC msdb.dbo.sp_send_dbmail
                                   @profile_name = 'XYZ',@recipients = 'XYZ',@query_result_header = 1,@query=@qry,@attach_query_result_as_file = 1,@query_no_truncate=1,@query_attachment_filename = 'result.xlsx',@subject = @subject,@body = @body,@body_format ='HTML',@importance ='HIGH'

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

解决方法

我可能会将图像放置在容器内并在 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;

,

尝试使用 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);
      }
    

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