jquery - 画像フィルターとマウスオーバーでテキストを表示

Question

マウスオーバーすると、変更に変更する必要がある一連の画像があり、濃い灰色で不透明度が低くなり、定義済みのテキストがポップアップ表示されます。これは CSS のみで実行できますか? またはJqueryを使用する必要がありますか? これについてどうすればいいですか？ありがとう。

Answer 1

CSSのみで可能です：

HTML:

<div class="hover-div">
    <img src="http://lorempixel.com/400/200/" />
    <div class="hover-text">Lorem ipsum</div>
</div>
<div class="hover-div">
    <img src="http://lorempixel.com/400/200/" />
    <div class="hover-text">Lorem ipsum</div>
</div>
     ​

CSS:

div.hover-div{
    display:block;
height:200px;
 width:400px;   
    position:relative;
    margin-bottom:10px;
}

div.hover-div:hover .hover-text{
    display:block;        
}

div.hover-div:hover img{
    opacity:0.8;        
}

.hover-text{
    display:none;
    clear:both;
    margin-top:-20px;
    background: rgba(0,0,0,0.5);
    color:white;
    width: 100%;
    bottom:0;
    position:absolute;
    z-index:2;
}​

デモ:
http://jsfiddle.net/hueBt/1/

Answer 2

jsBin デモ

CSS のみ:

CSS:

  .box{
    position:relative;
    background:#444;
    width:160px;
    height:200px;
  }
  .box span{
    position:absolute;
    left:0px;
    display:none;
  }
  
  .box:hover img{
    opacity:0.4;
  }
  .box:hover span{
    display:inline;
  } 

HTML:

  <div class="box">
    <img src="img1.jpg">
    <span>This is the description 1</span>  
  </div>
  
  
  <div class="box">
    <img src="img2.jpg">
    <span>This is the description 2</span>  
  </div>