Пример:
- Открытие большой фотографии в модальном окне по клику присутствует только на примере и реализуется средствами данного блога, а не кодами, что представлены ниже.
- Миниатюра, которая используется на примере представлена в оригинальном размере справа (в мобильной версии ниже) и размером 180 x 254 px
- Последовательность фото начинается справа налево
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="license-wr"> <div class="license"> <div> <a href="license-1.jpg"> <img src="license_thumb-1.jpg" alt="" /> </a> </div> <div> <a href="license-2.jpg"> <img src="license_thumb-2.jpg" alt="" /> </a> </div> <div> <a href="license-3.jpg"> <img src="license_thumb-3.jpg" alt="" /> </a> </div> <div> <a href="license-4.jpg"> <img src="license_thumb-4.jpg" alt="" /> </a> </div> </div> </div> |
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
.license-wr { display: flex; background-color: #eee; background-repeat: no-repeat; background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5%, #bbb 45.6%, #ccc 45.8%, #eee 60%), linear-gradient(30deg, #ccc, #eee 90%); background-size: 100% 320px; background-position: 50% 100%; margin: 20px 0; } .license { box-sizing: border-box; width: 100%; margin: 80px auto 0; min-height: 330px; position: relative; } @media (max-width: 767px) { .license { transform:scale(0.7); top: 6px; } } @media (max-width: 500px) { .license { transform:scale(0.4); top: 12px; } } .license > div { width: 150px; position: absolute; left: calc(50% + 100px); bottom: 73px; z-index: 0; display: flex; justify-content: flex-end; } .license > div:before { content: ''; width: 100%; height: 100%; position: absolute; left: -100px; top: 14px; z-index: 1; background-repeat: no-repeat; background-image: linear-gradient(110deg, transparent 49%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.2) 65%), linear-gradient(30deg, transparent 46%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 65%), radial-gradient(ellipse at 90% 100%, rgba(0,0,0,0.1) 10%, transparent 50%); transform: rotate(-8deg); pointer-events: none; } .license > div:after { content: ''; width: 100%; height: 100%; position: absolute; transition: 0.3s; display: block; z-index: 3; background-image: linear-gradient(45deg, rgba(0,0,0,0.3), transparent 70%), linear-gradient(45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.3) 80%); transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize)); pointer-events: none; } .license > div img { width: 100%; height: 100%; display: block; position: relative; z-index: 2; border-left: 2px solid; border-image: linear-gradient(105deg, transparent 0.5%, #bbb 0.7%) 1; box-shadow: 1px 2px 0 -1px #ccc; transform: perspective(200px) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize)); } .license > div:nth-of-type(4) { --resize: 0.99; margin-left: -404px; } .license > div:nth-of-type(4):before { background-size: 100% 85%, 100% 15%, 100% 10%; background-position: 1px 0, 0 100%, -30px 83%; } .license > div:nth-of-type(3) { --resize: 0.96; margin-left: -153px; transform: scaleY(0.98) translate(-80px, -21px); } .license > div:nth-of-type(3):before { background-size: 100% 84%, 100% 16%, 100% 10%; background-position: 4px 0, 0 100%, -30px 81%; } .license > div:nth-of-type(2) { --resize: 0.925; margin-left: 100px; transform: scaleY(0.965) translate(-170px, -42px); } .license > div:nth-of-type(2):before { background-size: 100% 83%, 100% 17%, 100% 10%; background-position: 6px 0, 1px 100%, -30px 81%; } .license > div:nth-of-type(1) { --resize: 0.895; margin-left: 352px; transform: scaleY(0.94) translate(-266px, -62px); } .license > div:nth-of-type(1):before { background-size: 100% 82%, 100% 18%, 100% 10%; background-position: 8px 0, 1px 100%, -30px 80%; } |
За основу взято решение, найденное на codepen.io у пользователя Lynn Fisher
Ура, *ля... Сделал!
Извиняюсь за мой "Французски"! :0)
https://yadi.sk/i/IverjOFr9hKZsA
Фотка не может загрузиться в вашем модальном окне.
1 - проверить пути к ним
2 - смотреть модалку, почему она не открывает
This image failed to load.
ЗДРАВСТВУЙТЕ! ЧТО ЭТО МОЖЕТ БЫТЬ? ЭТО ПРИ НАЖАТИИ НА СЕРТИФИКАТ, НЕ УВИЛИЧИВАЕТСЯ...
Токая же песня... Увеличение не срабатывает...
Я не делал код для увеличения фото, т.к. у каждого сайта своя галерея, например фансибокс или магнифик. Нет смысла ставить дополнительную ради этой секции.
А если нет, то можно подключить например Fancybox 3 и использовать для других модальных окон или галерей.
Доброго времени суток, скажите пожалуйста какими именно средствами реализуется? У вас можно это найти? Сайт отличный я уже много чем воспользовался у вас.
А тут же дан и CSS и HTML код
Протестируй и будет понятнее 🙂