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

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 和不透明度修复一些东西，但我不知道在哪里调整它，我也不确定在哪里放置过渡效果。我尝试过的所有方法都没有奏效，所以如果有人能告诉我如何从零开始实现悬停效果，我将不胜感激。

Answer 1

您可以使用伪元素 ::after to create an overlay. Just use 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 标记。

Answer 2

嗨，这会让你开始。首先创建一个覆盖层不透明度 0，然后写一点 jQuery 以便在悬停时应用 class 不透明度 1 和 rgba（rgb 不透明度）和 css 过渡。

查看代码了解更多信息，如果您愿意，可以使用此代码运行我已经将叠加层与图像分开，因此您可以同时控制它们：

$( 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>

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

How do I achieve this particular hover effect?

css

transition

hover