Pop Images like Google Images
16,902
Solution 1
#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>
Solution 2
I was looking for the same thing and had to build a scalable plugin. What was important for me was it scaled within the Wapper or browser like google.
Here is the plugin with a demo
DEMO
Download plugin on Github
I hope this helps
Solution 3
There are a lot of jQuery plugins available for this
Comments
-
eozzy about 2 years
Is there any jQuery plugin or CSS technique to achieve this pop effect like google images?
Thanks
-
eozzy almost 13 yearsNooo don't need a tooltip. Have you tried google image search?
-
eozzy almost 13 yearsNooo don't need a tooltip. Have you tried google image search? – Nimbuz just now edit
-
Surreal Dreams almost 13 yearsI'm very familiar with GIS. Check out the demo for imgpreview: james.padolsey.com/demos/imgPreview/full Towards the bottom, it gets a lot more preview and a lot less tooltip.
-
Jack almost 12 years@RokoC.Buljan want to ask some help
-
JinSnow about 11 yearsI tried your example but I can't get it to work. I am getting an error in firebug console : "$j("#images img").ibox is not a function". In my index.php, I have called the .js file which contains the pluggin and beneath "$(document).ready(function() { $('#images img').ibox(); });" as in the demo. I am really new to the jQuery world, I may miss something obvious!
-
JinSnow about 11 yearsthanks for your work ! I was looking for soemthing scalable ! great great great !