この特定のホバー効果を達成するにはどうすればよいですか？

Question

私はthisホバー効果を複製しようとしていますが、私は正直であるところから始めることさえ確信しています。

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

} 

は、ここに私のHTMLコードです。私はZ-インデックスと不透明度を使って何かを修正する必要があると思うが、どこで調整するか分からず、どこにトランジションエフェクトを置くべきかわからない。私が試したことはすべて、うまくいけばクリーンスレートからそのホバー効果を達成する方法を私に示すことができればうまくいきませんでした。

Answer 1

あなたはオーバーレイを作成するために、擬似要素::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タグがありませんでした。

Answer 2

セクションでは、変換する前に指定した属性に新しい値を設定できます。たとえば、background-color: black;のポートフォリオを設定すると、アイテムは黒になります。 portfolio-itemとopacity: 0;の場合はをportfolio-item:hoverと指定することもできます。 exapleを見てください：

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

 
.portfolio-item:hover { 
 
    background-color: #14C; 
 
    opacity: .5; 
 
}

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

Answer 3

こんにちはこれがあなたを始めます。最初にオーバーレイ不透明度0を作成し、ホバー上でrgba（不透明度を持つrgb）とCSS遷移を使用して不透明度1を適用するように、少しjQueryを作成します。

あなたが好きならば、あなたはそれらの両方の制御を持っているので、私は画像からオーバーレイを隔ててきた多くのためのコードを参照してください、そしてこれを実行します。

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