像 Google 图片这样的流行图片 [英] Pop Images like Google Images
本文介绍了像 Google 图片这样的流行图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否有任何 jQuery 插件或 CSS 技术来实现像谷歌图像这样的弹出效果?
Is there any jQuery plugin or CSS technique to achieve this pop effect like google images?
谢谢
推荐答案
#images{
padding:30px;
}
#images img{
position:relative;
float:left;
height:100px;
margin:5px;
transition:0.3s;
box-shadow: 0 0 0 10px #fff;
}
#images img:hover{
z-index:2;
transform: scale(1.2);
}
#images img:hover:after{
content: attr(title);
}
<div id="images">
<img src="http://dummyimage.com/180x120/000/fff" alt=""/>
<img src="http://dummyimage.com/175x104/f0f/fff" alt=""/>
<img src="http://dummyimage.com/150x100/a3d/fff" alt=""/>
<img src="http://dummyimage.com/278x125/cf5/fff" alt=""/>
<img src="http://dummyimage.com/199x120/e46/fff" alt=""/>
<img src="http://dummyimage.com/207x480/361/fff" alt="" />
<img src="http://dummyimage.com/400x107/081/fff" alt="" />
<img src="http://dummyimage.com/50x40/cc3/fff" alt="" />
<img src="http://dummyimage.com/700x500/233/fff" alt="" />
<img src="http://dummyimage.com/300x120/a26/fff" alt="" />
<img src="http://dummyimage.com/341x177/f10/fff" alt="" />
</div>
这篇关于像 Google 图片这样的流行图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文