将鼠标悬停在图像上时显示响应式覆盖图

我想覆盖和图像，以响应并适应屏幕：

width:100%; 
height:auto;

这是工作的实际图像上，但是当香港专业教育学院累我添加覆盖我不能看到拿到通过使用百分比来响应覆盖。

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

所以，当你拖动屏幕更大和更小我想要的图像，并使用％的屏幕扩大覆盖。

干杯

来源

2013-11-26 John

写：

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

来源

2013-11-26 12:10:40 Hiral

感谢什么，但它不是什么我的意思是。如果你看看这个http://jsfiddle.net/w2NV3/2/如果你调整面板的大小，你可以看到图像展开到屏幕上。我需要覆盖悬停做相同的，因为该网站是响应，所以当它在一个较小的屏幕上，它仍然有效 – John

@John更新回答 – Hiral

感谢队友，一个微小的事情，图像的高度似乎被切断和没有正确扩大 - 在#mainwrapper .box，我似乎无法得到宽度和高度自动扩展使用％？ – John

退房famcybox：http://webdesignandsuch.com/fancybox-image-overlay-packaged-for-download/

我认为这是你正在寻找

来源

2013-12-11 23:12:44 Bhetzie

将鼠标悬停在图像上时显示响应式覆盖图

回答

相关问题