如何实现这种特殊的悬停效果？

Question

我正在尝试复制 this 悬停效果，但我什至确定从哪里开始说实话。

这是我的 HTML 代码：

    <div class="row">
          <div class="col-sm-4 portfolio-item">
            <a href="#" class="thumbnail">
               <img src="img/portfolio/cabin.png"> 
            </a>
          </div>
           <div class="col-sm-4 portfolio-item">
            <a href="#" class="thumbnail">
               <img src="img/portfolio/game.png"> 
            </a>
          </div>
           <div class="col-sm-4 portfolio-item">
            <a href="#" class="thumbnail">
               <img src="img/portfolio/circus.png"> 
            </a>
    </div>

CSS：（我所有）

#portfolio .portfolio-item {
  background-color: #18BC9C;
  transition: all ease .5s;
  -webkit-transition: all ease .5s;
}

#portfolio .portfolio-item:hover {

}

我什至不知道从哪里开始。我想我需要用 z-index 和 opacity 来修复一些东西，但我不知道在哪里调整它，我也不知道在哪里放置过渡效果。我尝试过的一切都没有奏效，所以如果有人能告诉我如何从一张白纸上实现悬停效果，将不胜感激。

Answer 1

您好，这将帮助您入门。首先创建一个覆盖不透明度 0，然后编写一个小 jQuery，以便在悬停时应用一个带有 rgba（带不透明度的 rgb）和 css 转换的类的不透明度 1。

查看代码以了解更多信息，如果您愿意，可以使用此代码运行

$( document ).ready(function() {
    $( '.portfolio-item' )
  .mouseover(function() {
    $( this ).find( '.overlay' ).addClass( 'show' );
  })
  .mouseout(function() {
    $( this ).find( '.overlay' ).removeClass( 'show' );
  });
});

* {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
box-sizing: border-box;
}

.col-sm-4 {
  float: left;
  width: 33%;
  position: relative;
  }

img {
width: 100%; 
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(145,0,0,0.5);
  z-index: 2;
  width: 100%;
  height: auto;
  opacity: 0;
  -webkit-transition: .3s ease-in opacity;
    -moz-transition: .3s ease-in opacity;
    transition: .3s ease-in opacity;
  }

.overlay.show {
opacity: 1;
}

.overlay.show:after {
  content: 'x'; 
  color: white;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  top: 50%;
  transform: translateY(-50%);
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
          <div class="col-sm-4 portfolio-item">
            <div class="overlay"></div>
            <a href="#" class="thumbnail">
               <img src="http://placehold.it/100x50"> 
            </a>
          </div>
           <div class="col-sm-4 portfolio-item">
             <div class="overlay"></div>
            <a href="#" class="thumbnail">
               <img src="http://placehold.it/100x50"> 
            </a>
          </div>
           <div class="col-sm-4 portfolio-item">
             <div class="overlay"></div>
            <a href="#" class="thumbnail">
               <img src="http://placehold.it/100x50"> 
            </a>
    </div>

Answer 2

您可以使用伪元素::after 来创建叠加层。只需使用opacity: 0; 隐藏它，并在悬停时显示它：opacity: 0.6;。作为过渡，您可以使用：transition: opacity ease .5s;。

这样，您可以在每个图像上创建一个颜色叠加层（仅在父元素上使用背景是不可能的）。要创建放大镜，您可以在<a> 标记内使用<span>，或使用其他伪元素::before。

.portfolio-item a {
  position: relative;
}
.portfolio-item a::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: #457647;
  opacity: 0;
  transition: opacity ease .5s;
}
.portfolio-item a:hover::after {
  opacity: 0.6;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-4 portfolio-item">
    <a href="#" class="thumbnail">
      <img src="//placehold.it/200x100/fff">
    </a>
  </div>
  <div class="col-sm-4 portfolio-item">
    <a href="#" class="thumbnail">
      <img src="//placehold.it/200x100/fff">
    </a>
  </div>
  <div class="col-sm-4 portfolio-item">
    <a href="#" class="thumbnail">
      <img src="//placehold.it/200x100/fff">
    </a>
  </div>
</div>

当然，您必须为旧版浏览器使用供应商前缀。还要确保您的标记是有效的 - 缺少一个结束 div 标记。