Пример:
Поводите мышкой по блокам.
Данный эффект может использоваться и в светлых тонах, но красивее выглядит на темных.
Font Awesome
Иконка установлена графическим шрифтом
IMG
Иконка установлена графическим файлом.
SVG
Иконка установлена SVG-кодом.
Длинный заголовок, который не умещается на одну строку
Описание блока
SVG
Текст в параграфе <p>
Еще описание
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 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 |
<div class="cards"> <div class="card"> <div class="card-image"> <i class="fa fa-user"></i> </div> <div class="card-content"> <div class="card-title"> Font Awesome </div> <div class="card-text"> Иконка установлена графическим шрифтом </div> </div> </div> <div class="card"> <div class="card-image"> <img src="card-icon.png" /> </div> <div class="card-content"> <div class="card-title"> IMG </div> <div class="card-text"> Иконка установлена графическим файлом. </div> </div> </div> <div class="card"> <div class="card-image"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.47 360.25c-1.56-.82-32.39-16.89-76.78-25.81 64.25-75.12 84.05-161.67 84.93-165.64 1.18-5.33-.44-10.9-4.3-14.77-3.03-3.04-7.12-4.7-11.32-4.7-1.14 0-2.29.12-3.44.38-3.88.85-86.54 19.59-160.58 79.76.01-1.46.01-2.93.01-4.4 0-118.79-59.98-213.72-62.53-217.7A15.973 15.973 0 0 0 256 0c-5.45 0-10.53 2.78-13.47 7.37-2.55 3.98-62.53 98.91-62.53 217.7 0 1.47.01 2.94.01 4.4-74.03-60.16-156.69-78.9-160.58-79.76-1.14-.25-2.29-.38-3.44-.38-4.2 0-8.29 1.66-11.32 4.7A15.986 15.986 0 0 0 .38 168.8c.88 3.97 20.68 90.52 84.93 165.64-44.39 8.92-75.21 24.99-76.78 25.81a16.003 16.003 0 0 0-.02 28.29c2.45 1.29 60.76 31.72 133.49 31.72 6.14 0 11.96-.1 17.5-.31-11.37 22.23-16.52 38.31-16.81 39.22-1.8 5.68-.29 11.89 3.91 16.11a16.019 16.019 0 0 0 16.1 3.99c1.83-.57 37.72-11.99 77.3-39.29V504c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-64.01c39.58 27.3 75.47 38.71 77.3 39.29a16.019 16.019 0 0 0 16.1-3.99c4.2-4.22 5.71-10.43 3.91-16.11-.29-.91-5.45-16.99-16.81-39.22 5.54.21 11.37.31 17.5.31 72.72 0 131.04-30.43 133.49-31.72 5.24-2.78 8.52-8.22 8.51-14.15-.01-5.94-3.29-11.39-8.53-14.15z"/></svg> </div> <div class="card-content"> <div class="card-title"> SVG </div> <div class="card-text"> Иконка установлена SVG-кодом. </div> </div> </div> <div class="card"> <div class="card-image"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg> </div> <div class="card-content"> <div class="card-title"> Длинный заголовок, который не умещается на одну строку </div> <div class="card-text"> Описание блока </div> </div> </div> <div class="card"> <div class="card-image"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"/></svg> </div> <div class="card-content"> <div class="card-title"> SVG </div> <div class="card-text"> <p>Текст в параграфе <p></p> <p>Еще описание</p> </div> </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 |
.cards { display: flex; flex-wrap: wrap; justify-content: center; background: url(background.jpg); background-size: cover; background-position: center; margin: 20px 0; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 18px rgba(0, 0, 0, 0.1); } .cards:hover .card:after { opacity: 1; } .cards .card { background-color: #4f93ce; border-radius: 10px; display: flex; flex-direction: column; position: relative; width: calc(33.333% - 20px); margin: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); opacity: 0.95; } @media screen and (max-width: 767px) { .cards .card { width: calc(50% - 20px); } } @media screen and (max-width: 520px) { .cards .card { width: calc(100% - 20px); } } .cards .card:hover:before { opacity: 1; } .cards .card:before, .cards .card:after { border-radius: inherit; content: ""; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; transition: opacity 500ms; width: 100%; } .cards .card:before { background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.4), transparent 40%); z-index: 3; } .cards .card:after { background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.9), transparent 40%); z-index: 1; } .cards .card .card-content { background-color: #337AB7; border-radius: inherit; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 78px 16px 16px; z-index: 2; height: 100%; line-height: 1.2; margin: 2px; } .cards .card .card-image { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; } .cards .card .card-image i { font-size: 64px; color: #16354f; } .cards .card .card-image img { height: 64px; } .cards .card .card-image svg { height: 64px; fill: #16354f; } .cards .card .card-title { font-size: 18px; padding: 10px 0; color: #BFE2FF; text-transform: uppercase; font-weight: 600; } .cards .card .card-text, .cards .card .card-text p { font-size: 16px; color: #FFF; margin: 0; } .cards .card .card-text p:not(:last-child) { margin-bottom: 10px; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let cards = document.querySelectorAll(".cards"); for( let i = 0; i < cards.length; i++){ cards[i].onmousemove = e => { for(const card of document.getElementsByClassName("card")) { const rect = card.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top; card.style.setProperty("--mouse-x", `${x}px`); card.style.setProperty("--mouse-y", `${y}px`); }; } } |
Добавить комментарий: