将鼠标悬停在图像上时显示响应式叠加

Question

我希望能够在图像悬停时在图像上显示叠加层。

我希望叠加层和图像能够响应并适应屏幕：

 width:100%;
 height:auto;

这是在实际图像上工作，但是当我厌倦了添加i时，我看不到通过使用百分比来覆盖响应。

以下是演示： http://jsfiddle.net/w2NV3/

因此，当您将屏幕拖得越来越小时，我希望图像和叠加层在屏幕上使用％进行扩展。

干杯

Answer 1

写：

.grid li {
    padding:0
}
#mainwrapper .box .slide-caption {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    text-align: left;
    padding: 15px;
    left: 100%;
}

Updated fiddle here.

Answer 2

查看famcybox：http://webdesignandsuch.com/fancybox-image-overlay-packaged-for-download/

我认为这就是你要找的东西