Поп изображения, такие как Google Images

Question

Есть ли какой-нибудь плагин jQuery или техника CSS для достижения такого поп-эффекта, как изображения в Google?

Спасибо

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

Answer 2

Я искал то же самое и должен был создать масштабируемый плагин.Для меня было важно, чтобы он масштабировался в Wapper или браузере, как Google.

Вот плагин с демо

DEMO

Скачать плагин на Github

Надеюсь, это поможет

Answer 3

Для этого доступно множество плагинов jQuery

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

Answer 4

Посмотрите это из кода Google:

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

Answer 5

Вот вариант для плагина типа предварительного просмотра при наведении мыши: imgpreview

Также есть, проверьте второе демо: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Советы по красоте также могут быть полезны, они кажутся довольно гибкими. Коробка стиля Netflix довольно хороша.