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 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> |
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 |
.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; } } |
JS:
|
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"); } |
Для чего нужен JavaScript
Так как изначально нам неизвестно, сколько точно контента будет в каждом блоке, а плавно трансформировать с точной высоты на неопределенную (100% или auto) нельзя, то можно использовать 4 разных способа:
Задать при ховере всему описанию в контейнере
face-2конкретную высоту.
В этом случае плавность будет такая же, как на примере, но в описании будут пустоты или прокрутка, т.к. высота каждого блока одинаковая.Задать при ховере каждому описанию в контейнере
face-2разную высоту
Результат будет 1 в 1 как на примере, только придется на глаз вычислять эту самую высоту.Использовать CSS-свойство
max-height, которое будет иметь значение высоты контейнера, а при ховере иметь раз в пять больше.
Решение удобное, но при таком раскрытии может возникать прыжок.Использовать маленький скрипт, как в этом примере, который определит высоту контейнера с контентом и передаст это значение в CSS для точного перехода между двумя величинами.
При изменении кол-ва блоков, скрипт менять не стоит, нужно будет лишь добавить новый класс. Для четвертого блока он будет таким:123.card-container .card:nth-child(4):hover .face-2 {height: var(--face_height_4);}
А можно ли закруглить края и рамку сделать?
Классная статья!
Круто!
Не будет ли слишком нагло, если помечтать, еще бы добавить решение, когда к фону можно применить parallax, тогда - вообще пушка будет!!!))
В очередной раз респект за Блог и темы, которые поднимаете 😉
Можно использовать это [url="https://atuin.ru/blog/parallaks-effekt-pri-dvizhenii-myshi/"]решение[/url], но у меня в мозиле какое то дергание возникает, в хроме отлично все.
[url="https://atuin.ru/test/sar/"]Результат[/url]
Или использовать что то более профессиональное, например:
[url="https://atuin.ru/blog/parallaks-effekty-s-bibliotekoj-parallax-js/"]parallax.js[/url] или [url="https://atuin.ru/blog/parallaks-effekt-simpleparallax/"]simpleParallax[/url]
Уфы!
Здорово)
Да, в мозиле прослеживается подергивание.
Ок. Буду играться - пища для ума здоровская!!!
Благодарю!