Галерея для сайта на CSS3 (В виде табов)
Реализация простой, но в тоже время функциональной галереи в виде вкладок (табов) с помощью CSS3
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<li> <input type="radio" name="select" id="mtb"> <div class="item-hugger"> <div class="title">MTB</div> <img class="thumb-image" src="#" /> <label for="mtb"></label> </div></p> <div class="content"> <div class="item-wrapper"> <img src="#" /> <div class="title">Mtb</div> </div> </div> </li> |
Это один из контейнеров, в который мы поместили как превью изображения, так и большую картинку.
2. Подключаем стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
.thumbnails { list-style: none; font-size: 0; margin-left: -2%; li { display: inline-block; width: 23%; margin-left: 2%; text-align: center; vertical-align: middle; } li:hover { .item-hugger { background: white; .title { color: #000; } } } input[name="select"] { display: none; } .item-hugger { position: relative; height: 140px; margin: 20px 0; background: #f2f2f2; transition: all 150ms ease-in-out; } label { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; } .title { padding: 20px 0 0; font-size: 18px; color: #555; transition: all 150ms linear; } .thumb-image { height: 100px; padding: 20px 0; } .content { position: absolute; bottom: 0; left: 0; width: 600px; height: 500px; padding: 50px; opacity: 0; transition: all 150ms linear; display: flex; flex-direction: column; justify-content: center; .title { font-size: 60px; font-weight: 400; display: inline-block; color: #555; border-bottom: 6px solid #fe7701; padding: 50px 10px 0; text-transform: uppercase; } } input[name="select"]:checked + .item-hugger { height: 180px; margin: 0; background: white; } input[name="select"]:checked ~ .content { opacity: 1; } } .white-box { background: white; height: 500px; } |
Готово.
