Всплывающие при наведении мыши миниатюры рисунков средствами только CSS
Такое делается уже давно, но мне хотелось без лишнего кода и хотя бы слегка адаптивно.
Требования к галерее были такими:
- только CSS, без Javascript;
- не переоформляет тегов, используя только селекторы класса (использует ещё элементы списка
li
, но только помещённые в ненумерованный списокul
классаgalleryList
); - не чувствительна к размеру картинок, сама обрезает и позиционирует их на эскизах.
Вот что вышло (браузер должен быть не слишком старым):
По сравнению с простейшей галереей, у такой есть ещё как бы промежуточное состояние - миниатюра увеличивается и всплывает наверх при наведении курсора мыши. Ниже приведён код стиля и разметка из этого примера. Обратите внимание на раздел
<div style="clear: both;"></div>
в конце. Он нужен, потому что в стиле были элементы с установленным обтеканием (свойством float
).
<style> /* Основные стили: */ .galleryWrapper { width: 40%; margin: 40px auto; } div.galleryDiv { margin-top: 30px; } div.galleryDiv ul.galleryList { list-style-type: none; margin-left: 35px; } div.galleryDiv ul.galleryList li { position: relative; float: left; width: 130px; height: 130px; margin: 5px; padding: 5px; z-index: 0; } div.galleryDiv ul.galleryList li:hover { /* вверх по слоям при наведении */ z-index: 50; } div.galleryDiv ul.galleryList li img { /* миниатюра */ position: absolute; left: 0; top: 0; border: 1px dotted #dddddd; padding: 5px; width: 130px; height: 130px; background: #f0f0f0; } div.galleryDiv ul.galleryList li img:hover { /* всплытие при наведении */ width: 260px; height: 260px; margin-top: -130px; margin-left: -130px; top: 65%; left: 65%; } /* Анимация: */ div.galleryDiv ul.galleryList li, div.galleryDiv li img { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } /* Адптивная верстка: */ @media only screen and (min-width: 499px) and (max-width: 1212px) { .galleryWrapper { width: 500px; } } @media only screen and (max-width: 498px) { .galleryWrapper { width: 300px; } div.galleryDiv ul.galleryList { list-style-type: none; margin: 0; } } </style> <!-- Собственно разметка --> <div class="galleryWrapper"> <div class="galleryDiv"> <ul class="galleryList"> <li> <a href="http://blog.kislenko.net/archives/k2016/1.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/1.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/2.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/2.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/3.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/3.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/4.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/4.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/5.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/5.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/6.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/6.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/7.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/7.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/8.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/8.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/9.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/9.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/10.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/10.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/11.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/11.jpg"> </a> </li> <li> <a href="http://blog.kislenko.net/archives/k2016/12.jpg" target="_blank"> <img src="http://blog.kislenko.net/archives/k2016/12.jpg"> </a> </li> </ul> </div> </div> <div style="clear: both;"></div>
02.01.2020, 18:58 [1470 просмотров]