Всплывающие при наведении мыши миниатюры рисунков средствами только 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 [1469 просмотров]