这很简单。将图片和“出现在悬停时”说明包装在div中,图片的尺寸相同。然后,使用一些CSS,命令描述在悬停该div时显示。
* { margin: 0; padding: 0; border: 0;}.img__wrap { position: relative; height: 200px; width: 257px;}.img__description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(29, 106, 154, 0.72); color: #fff; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;}.img__wrap:hover .img__description { visibility: visible; opacity: 1;}<div > <img src="http://placehold.it/257x200.jpg" /> <p >This image looks super neat.</p></div>


