
Изначально секция рассчитана на три блока, но по аналогии их можно легко увеличить или уменьшить.
Для плавности раскрытия описания фотографии используется коротенький JavaScript.
Изначально секция рассчитана на три блока, но по аналогии их можно легко увеличить или уменьшить.
Для плавности раскрытия описания фотографии используется коротенький JavaScript.
Пример сделан на варианте оформления секции с достопримечательностями города Саратова
Саратовская государственная консерватория имени Л.В. Собинова (СГК) — высшее музыкальное учебное заведение в Саратове, третья по счёту консерватория в России. Основана в 1912 году на базе музыкального училища.
Мемориальный комплекс «Журавли» в парке Победы на Соколовой горе г. Саратова — памятник саратовцам, погибшим во время Великой Отечественной войны 1941—1945 годов. Мемориальный комплекс «Журавли», один из символов Саратова.
Мемориальный комплекс «Журавли» в парке Победы на Соколовой горе г. Саратова — памятник саратовцам, погибшим во время Великой Отечественной войны 1941—1945 годов. Мемориальный комплекс «Журавли», один из символов Саратова.
Сара́товский цирк и́мени бра́тьев Ники́тиных — цирк в Саратове, второй стационарный цирк в Европе (после Пензенского). Основан в 1876 году цирковыми предпринимателями и артистами братьями Никитиными. Является федеральным объектом, подчиняющимся Министерству культуры РФ.
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 |
<section class="card-container"> <div class="card"> <div class="face face-1"> <img src="photo.jpg" alt="" /> <h3>Заголовок</h3> </div> <div class="face face-2"> <p>Текст</p> </div> </div> <div class="card"> <div class="face face-1"> <img src="photo.jpg" alt="" /> <h3>Заголовок</h3> </div> <div class="face face-2"> <p>Текст</p> </div> </div> <div class="card"> <div class="face face-1"> <img src="photo.jpg" alt="" /> <h3>Заголовок</h3> </div> <div class="face face-2"> <p>Текст</p> </div> </div> </section> |
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 |
.card-container { width: 100%; position: relative; background: url(background.jpg); background-size: cover; background-position: 50% 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; height: 500px; margin: 20px 0; } .card-container:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .card-container .card { margin: -20px 20px; width: 300px; } .card-container .card .face { width: 100%; height: 200px; transition: 0.5s; background: #FFF; overflow: hidden; } .card-container .card .face-1 { position: relative; z-index: 2; transform: translateY(50px); box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .card-container .card:hover .face-1 { transform: translateY(0); } .card-container .card .face-1 img { filter: brightness(0.8); width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .card-container .card:hover .face-1 img { filter: brightness(1) } .card-container .card .face-1 h3 { padding: 10px 0; margin: 0; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.5); color: #FFF; width: 100%; color: #fff; text-align: center; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; } .card-container .card .face-2 { position: relative; z-index: 1; opacity: 0; background: #fff; padding: 20px 20px 10px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); transform: translateY(-100px); height: 100px; transition: 0.5s; } .card-container .card:hover .face-2 { transform: translateY(0); opacity: 1; } .card-container .card:nth-child(1):hover .face-2 { height: var(--face_height_1); } .card-container .card:nth-child(2):hover .face-2 { height: var(--face_height_2); } .card-container .card:nth-child(3):hover .face-2 { height: var(--face_height_3); } .card-container .card .face-2 p { margin: 0; padding: 0 0 10px; font-size: 15px; line-height: 1.3; font-family: Verdana, sans-serif; } @media screen and (max-width: 696px) { .card-container { margin: 140px 0; } } |
1 2 3 4 |
let card = document.querySelectorAll(".card"); for( let i = 1; i <= card.length; i++ ){ document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px"); } |
Так как изначально нам неизвестно, сколько точно контента будет в каждом блоке, а плавно трансформировать с точной высоты на неопределенную (100%
или auto
) нельзя, то можно использовать 4 разных способа:
Задать при ховере всему описанию в контейнере face-2
конкретную высоту.
В этом случае плавность будет такая же, как на примере, но в описании будут пустоты или прокрутка, т.к. высота каждого блока одинаковая.
Задать при ховере каждому описанию в контейнере face-2
разную высоту
Результат будет 1 в 1 как на примере, только придется на глаз вычислять эту самую высоту.
Использовать CSS-свойство max-height
, которое будет иметь значение высоты контейнера, а при ховере иметь раз в пять больше.
Решение удобное, но при таком раскрытии может возникать прыжок.
Использовать маленький скрипт, как в этом примере, который определит высоту контейнера с контентом и передаст это значение в CSS для точного перехода между двумя величинами.
При изменении кол-ва блоков, скрипт менять не стоит, нужно будет лишь добавить новый класс. Для четвертого блока он будет таким:
1 2 3 |
.card-container .card:nth-child(4):hover .face-2 { height: var(--face_height_4); } |
Секция-слайдер, в которой каждый слайд состоит из четырех фотографий.
Вариант оформления блока с шестиугольными фотографиями разного размера
Блок-секция с поздравительной открыткой к Новому Году.
А можно ли закруглить края и рамку сделать?
Классная статья!
Круто!
Не будет ли слишком нагло, если помечтать, еще бы добавить решение, когда к фону можно применить parallax, тогда - вообще пушка будет!!!))
В очередной раз респект за Блог и темы, которые поднимаете 😉
Можно использовать это решение, но у меня в мозиле какое то дергание возникает, в хроме отлично все.
Результат
Или использовать что то более профессиональное, например:
parallax.js или simpleParallax
Уфы!
Здорово)
Да, в мозиле прослеживается подергивание.
Ок. Буду играться - пища для ума здоровская!!!
Благодарю!