@skyfly2010

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

Добрый день, подскажите, как можно сделать вот такой эффект: ссылка. Наводим на ноут, появляется большая картинка.
Желательно без js, если это возможно круто было бы на чистом css3.
И очень хорошо, если знаете какую-нибудь статью на эту тему, где можно почитать как делать подобные эффекты.
  • Вопрос задан
  • 295 просмотров
Решения вопроса 1
EnChikiben
@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 красиво не получиться
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
mannaro
@mannaro
Умею профессионально гуглить
Неа, такое без JS не сделать. Тут надо мышку отслеживать. Таки, что тут тяжелого?
$('.image').on('mousemove', function(e) {})
и в функции из event достаешь pageX и pageY, потом считаешь релативную позицию курсора относительно картинки, и изменяешь background-position у большого изображения. Все :)
Ответ написан
@Wheelie
Без js можете красиво показать статичное увеличенное изображение. ( как подсказал человек выше) + css анимация.
А вот "эффект лупы" без js , на вскидку, не знаю как сделать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы