Pop Images like Google Images

Question

enter image description here

Is there any jQuery plugin or CSS technique to achieve this pop effect like google images?

Thanks

Roko C. Buljan · Accepted Answer · 2015-09-27T05:23:22.073

19

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

edited Sep 27 '15 at 05:23

answered Sep 14 '11 at 06:46

Roko C. Buljan

196,159
39
305
313

Nooo don't need a tooltip. Have you tried google image search? – eozzy Sep 14 '11 at 11:48
@RokoC.Buljan want to ask some help – Jack Jul 16 '12 at 09:54
I 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 Apr 12 '13 at 16:31

Andiio · Answer 2 · 2013-01-07T15:35:20.590

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

edited Jan 07 '13 at 15:35

answered Jan 07 '13 at 15:12

Andiio

77
4

1

thanks for your work ! I was looking for soemthing scalable ! great great great ! – JinSnow Apr 13 '13 at 05:19

score 1 · Answer 3 · answered Sep 14 '11 at 04:54

1

There are a lot of jQuery plugins available for this

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

answered Sep 14 '11 at 04:54

Tushar Ahirrao

12,669
17
64
96

Surreal Dreams · Answer 4 · 2011-09-14T05:01:25.940

0

Here's an option for a mouseover preview type plugin: imgpreview

There's also this, check the second demo: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Beautytips may also be of some use, it seems quite flexible. The Netflix style box is quite nice.

edited Sep 14 '11 at 05:01

answered Sep 14 '11 at 04:56

Surreal Dreams

26,055
3
46
61

Nooo don't need a tooltip. Have you tried google image search? – Nimbuz just now edit – eozzy Sep 14 '11 at 11:49
I'm very familiar with GIS. Check out the demo for imgpreview: http://james.padolsey.com/demos/imgPreview/full/ Towards the bottom, it gets a lot more preview and a lot less tooltip. – Surreal Dreams Sep 14 '11 at 15:18

score 0 · Answer 5 · answered Sep 14 '11 at 05:06

0

See this from google code:

http://code.google.com/p/jquery-image-hover/

answered Sep 14 '11 at 05:06

James Jithin

10,183
5
36
51

Pop Images like Google Images

5 Answers5

Linked