Как сделать увеличение изображения при hover мышью, как в примере?

Question

[skyfly2010]

Добрый день, подскажите, как можно сделать вот такой эффект: ссылка. Наводим на ноут, появляется большая картинка.
Желательно без js, если это возможно круто было бы на чистом css3.
И очень хорошо, если знаете какую-нибудь статью на эту тему, где можно почитать как делать подобные эффекты.

Answer 1

[enchikiben]

<div class="img">
<img src="/img.jpg">
<div class="big">
<img src="/img_big.jpg">
</div>
</div>

.img .big {
display: hone
}
.img:hover .big {
display: block
}

без js красиво не получиться

Answer 2

[Александр Вульф]

Неа, такое без JS не сделать. Тут надо мышку отслеживать. Таки, что тут тяжелого?
$('.image').on('mousemove', function(e) {})
и в функции из event достаешь pageX и pageY, потом считаешь релативную позицию курсора относительно картинки, и изменяешь background-position у большого изображения. Все :)

Comments

[Дмитрий Королёв]

codepen.io/mjtweaver/pen/epQQQB - банальное использование :hover. Но смысла в таких экзерсисах нуль, разумеется. JS использовать намного эффективнее.

[Александр Вульф]

Дмитрий Королёв: это круто! :D Серьезно.

[Дмитрий Королёв]

Александр Вульф: на всякий случай - это не я написал. Где-то видел интересный пример, где всё это делалось на SASS и Jade, и можно было изменить количество блоков изменением двух параметров. Пока искал его, набрёл на этот пример. Но суть та же - с помощью hover можно сделать и не такое. Однако, повторюсь, с JS это всё делается проще и, главное, эффективней.

Answer 3

[Wheelie]

Без js можете красиво показать статичное увеличенное изображение. ( как подсказал человек выше) + css анимация.
А вот "эффект лупы" без js , на вскидку, не знаю как сделать.