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

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

嗨，这会让你开始。首先创建一个不透明度为 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>