Продолжаем тему магии кодирования. В этой статье найдете скрипты для создания эффекта "лупы" при наведении курсора на картинку.
Видео по этой теме можно посмотреть тут. Итак, приступим. Сперва создаем страницу, добавляем блоки html и css. В блок html пишем код ниже.
<div class="wrap">
<div class="block1">
<div class="photo1">
<a href="ССЫЛКА ДЛЯ ПЕРЕХОДА ПО КЛИКУ"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА">
</a></div>
<div class="photo1">
<a href="ССЫЛКА ДЛЯ ПЕРЕХОДА ПО КЛИКУ"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА">
</a></div>
<div class="photo1">
<a href="ССЫЛКА ДЛЯ ПЕРЕХОДА ПО КЛИКУ"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА">
</a></div>
<div class="photo1">
<a href="ССЫЛКА ДЛЯ ПЕРЕХОДА ПО КЛИКУ"><img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА">
</a></div>
</div>
</div>
Если картинки должны быть НЕ кликабельными, то код ниже
<div class="wrap">
<div class="block1">
<div class="photo1">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА"></div>
<div class="photo1">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА"></div>
<div class="photo1">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА"></div>
<div class="photo1">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ ИЗ ФАЙЛОВОГО ХРАНИЛИЩА">
</div>
</div>
</div>
На скринах показано как взять ссылку на картинку из файлового хранилища
Теперь, когда ссылки на изображения добавлены, переходим к добавлению стилей нашего блока. Открываем css блок и пишем код ниже.
.block1 {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.block1 {
padding:20px 100px 20px 100px;
}
.block1 img {
width: 100%;
height: 100%;
transition: transform 0.5s;
}
.photo1:hover img {
transform: scale(1.7);
}
.photo1 {
overflow: hidden;
Margin: 5px;
}
Объясняю важные параметры:
Значения отступов ваших изображений от края блока. Последовательность сверху-справа-снизу-слева
Масштаб увеличения "лупы". Чем больше значение, тем больше приближает.
Скорость приближения изображения. Чем больше значение, тем медленнее приближение.
Посмотреть видео данной настройки можно тут
Может быть интересно:
Создаем картинки с увеличением при наведении. Геткурс CSS
Было полезно? Поделись с другими и ПОДПИШИСЬ на канал)
ФЕЯриЧНЫЙ ИНТЕНСИВ: CSS. ВИЗУАЛЬНОЕ ПРЕОБРАЖЕНИЕ ОНЛАЙН-ШКОЛЫ. Подробности смотрите в видео.
Присоединиться к интенсиву можно по ссылке https://clck.ru/sPSgV
Вы начинающий технический специалист и нужна практика по настройкам? Или не хватает проектов для оформления кейсов? Приходите в ТЗшки. Наберетесь опыта и сформируете кейсы за короткий срок. Подробнее по ссылке clck.ru/ggGhM
Если вы запускаете онлайн проект и не знаете с чего начать, или вам нужна консультация по конкретным задачам, обращайтесь.
Сделать это можно любым удобным способом:
Кристина-технический специалист онлайн-школ
ВК vk.me/krista_ap
Телеграм @krista_ap
89966906964
Ватсап Кристина