Подсветка блоков курсором мыши

Пример:

Поводите мышкой по блокам.

Данный эффект может использоваться и в светлых тонах, но красивее выглядит на темных.

Font Awesome

Иконка установлена графическим шрифтом

IMG

Иконка установлена графическим файлом.

SVG

Иконка установлена SVG-кодом.

Длинный заголовок, который не умещается на одну строку

Описание блока

IMG

Текст в параграфе <p>

Еще описание

HTML:

<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">
				IMG
			</div>
			<div class="card-text">
				<p>Текст в параграфе &lt;p&gt;</p>
				<p>Еще описание</p>
			</div>
		</div>
	</div>
</div>

</div>

Font Awesome

</div>

Иконка установлена графическим шрифтом

</div>

</div>

IMG

</div>

Иконка установлена графическим файлом.

</div>

</div>

SVG

</div>

Иконка установлена SVG-кодом.

</div>

</div>

Длинный заголовок, который не умещается на одну строку

</div>

Описание блока

</div>

</div>

IMG

</div>

<p>Текст в параграфе <p></p>

<p>Еще описание</p>

</div>

CSS:

.cards {
	display: flex;
	flex-wrap: wrap; 
	justify-content: center;
	background: url(background.jpg);
    background-size: cover;
    background-position: center;
    margin: 20px 0;  
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.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;
	font-family: 'Roboto', sans-serif;
	padding: 10px 0;
	color: #BFE2FF;
	text-transform: uppercase;
	font-weight: 600;
}
.cards .card .card-text,
.cards .card .card-text p {
	font-size: 15px;
	font-family: Verdana, sans-serif;
	color: #FFF;
	margin: 0;
}
.cards .card .card-text p:not(:last-child) {
	margin-bottom: 10px;
}

100

101

102

103

104

105

106

107

.cards {

display: flex;

flex-wrap: wrap;

justify-content: center;

background: url(background.jpg);

background-size: cover;

background-position: center;

margin: 20px 0;

padding: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.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;

font-family: 'Roboto', sans-serif;

padding: 10px 0;

color: #BFE2FF;

text-transform: uppercase;

font-weight: 600;

}

.cards .card .card-text,

.cards .card .card-text p {

font-size: 15px;

font-family: Verdana, sans-serif;

color: #FFF;

margin: 0;

}

.cards .card .card-text p:not(:last-child) {

margin-bottom: 10px;

}

JS:

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`);
		};
	}
}

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`);

};

}

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: