Jquery 图像过滤并在鼠标上方显示文本

我有一组图像，当鼠标移到上面时，需要更改为深灰色和较低的不透明度，并弹出预定义的文本。 这只适用于CSS吗？还是我需要使用Jquery？ 我该怎么办？ 谢谢

仅CSS：

css:

HTML:

这是描述1
这是描述2

仅使用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>
     ​

演示：

---

您想更改图像本身，还是想在图像上显示部分透明的层？预定义的文本将从何而来？

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

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

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