Масштабирование изображений при наведении на jquery
Иногда нужно реализовать увеличении картинки при наведении на нее мышки. На нашем сайте используется скрипт увеличения при клике на изображение. А этот отличается лишь тем, что мы просто наводим курсор и изображение масштабируется. Скрипт выполнен на jQuery. Скрипт выполняет для Bootstrap4, но его можно использовать на различных cms.
Ниже приведён пример скрипта.
Для начала подключаем файлы стилей и jQuery;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Далее html и сам скрипт;
<div class="container"><div class="row">
<div class="col-lg-6 offset-lg-3 order-lg-2">
<div class="img-wrapper p-5 text-center bg-success">
<img class="img-fluid rounded-circle" src="/uploads/9-1.png" alt="Георгиевская лента " />
</div>
</div>
</div></div>
<script>
$(document).ready(function()
{
$(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");
$(".img-wrapper").hover(
function()
{
$(this).find("img").css("transform", "scale(1.2)");
},
function()
{
$(this).find("img").css("transform", "scale(1)");
}
);
});
</script>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Заголовок верхнего уровня в HTML