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，以便在悬停类时使用不透明度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>

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: