По традиции рассказываю о том, что сейчас изучаю. В этой статье разберем как сделать плитку с увеличением картинок при наведении курсора и прописать ссылку для клика по картинкам.
Видео-обзор настройки можно посмотреть ТУТ, а пока приглашаю к тексту.
Задача создать блок с картинками с эффектом приближения при наведении курсора. Плюс картинки должны быть кликабельными. На стандартных инструментах геткурса такое реализовать нельзя, но нам на помощь идут чудеса css-кодирования.
Итак, для начала в файловое хранилище загружаем нужные нам картинки. Лучше, если они заранее будут одного размера.
Дальше идем в раздел сайты и создаем новую страницу.
Выбираем блок "Пустая страница"
Далее переходим к редактированию. Нам нужно добавить два блока: HTML и CSS
Далее открываем HTML блок и пишем следующий код.
<div class="info_block_1">
<a href=ссылка для перехода по клику"><img src="ссылка на изображение из файлового хранилища"> </a>
<a href=ссылка для перехода по клику"><img src="ссылка на изображение из файлового хранилища"> </a>
<a href=ссылка для перехода по клику"><img src="ссылка на изображение из файлового хранилища"> </a>
<a href=ссылка для перехода по клику"><img src="ссылка на изображение из файлового хранилища"> </a>
</div>
<div class="info_block_2">
<img src="ссылка на изображение из файлового хранилища">
<img src="ссылка на изображение из файлового хранилища">
<img src="ссылка на изображение из файлового хранилища">
<img src="ссылка на изображение из файлового хранилища">
</div>
В данном примере info_block_1 и info_block_2 - это названия рядов картинок. Вы можете назвать иначе, важно соблюдать нумерацию: 1,2,3 и т.д.
В графе info_block_1 прописаны ссылки для перехода по клику, в графе info_block_2 только изображения, без перехода по клику.
Ссылки на изображения из файлового хранилища на скрине
Далее переходим к анимации изображений. Для этого кликаем по блоку CSS и пишем код ниже.
.lt-block-wrapper img {
width: 260px;
}
.content1 {
padding: 10px;
}
.info_block_1 {
padding: 10px;
}
.info_block_2 {
padding: 10px;
}
.info_block_1 img {
margin: 10px;
}
.info_block_2 img {
margin: 10px;
}
.info_block_1 img:hover {
transform: scale(1.02);
transition: all 0.2s;
box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3);
}
.info_block_2 img:hover {
transform: scale(1.02);
transition: all 0.2s;
}
Детально расписывать что здесь за что отвечает не буду, можно посмотреть это в видео. Поясню только за цвет теней на 1 блоке box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.3); (это черный оттенок, последнее значение 0.3 отвечает за прозрачность тени, первые 3 цифры-это цвет).
Вот, собственно и все, чем я хотела сегодня поделиться.
Было полезно? Поделись с другими и ПОДПИШИСЬ на канал)
ФЕЯриЧНЫЙ ИНТЕНСИВ: CSS. ВИЗУАЛЬНОЕ ПРЕОБРАЖЕНИЕ ОНЛАЙН-ШКОЛЫ. Подробности смотрите в видео.
Присоединиться к интенсиву можно по ссылке https://clck.ru/sPSgV
Вы начинающий технический специалист и нужна практика по настройкам? Или не хватает проектов для оформления кейсов? Приходите в ТЗшки. Наберетесь опыта и сформируете кейсы за короткий срок. Подробнее по ссылке clck.ru/ggGhM
Если вы запускаете онлайн проект и не знаете с чего начать, или вам нужна консультация по конкретным задачам, обращайтесь.
Сделать это можно любым удобным способом:
Кристина-технический специалист онлайн-школ
ВК vk.me/krista_ap
Телеграм @krista_ap
89966906964
Ватсап Кристина