Эффект выделения блока при наведении курсора

Пример:

Контент блока

HTML:

<div class="bcard-wraper">
	<div class="background"></div>
	<div class="bcard">
		<div class="bcard-main">
			<div class="bcard-inner">
				<p>Контент блока</p>
			</div>
		</div>
	</div>
	<div class="bcard">
		<div class="bcard-main">
			<div class="bcard-inner">
				<p>Контент блока</p>
			</div>
		</div>
	</div>
	<div class="bcard">
		<div class="bcard-main">
			<div class="bcard-inner">
				<p>Контент блока</p>
			</div>
		</div>
	</div>
</div>

<p>Контент блока</p>

</div>

<p>Контент блока</p>

</div>

<p>Контент блока</p>

</div>

CSS:

.bcard-wraper * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.background {
	background: #337AB7;
	border-radius: 20px;
	position: absolute;
	transition: all 0.4s ease-in-out;
	opacity: 0;    
}
.bcard-wraper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bcard {
	height: 100%;
	width: 100%;
	display: inline-block;
	position: relative;
	padding: 10px;
}
.bcard-main {
	border: 4px solid #337AB7;
	padding: 14px 20px;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: 0.5s;
}
.bcard:hover .bcard-main {
	position: relative;
	z-index: 20;
}
.bcard-inner {
	position: relative;
	z-index: 50;
	height: 100%;
	text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;	
}
@media screen and (max-width: 991px) {
	.bcard-wraper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (max-width: 767px) {
	.bcard-wraper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (max-width: 575px) {
	.bcard-wraper {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.bcard {
		padding: 5px;
	}
}

.bcard-wraper * {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.background {

background: #337AB7;

border-radius: 20px;

position: absolute;

transition: all 0.4s ease-in-out;

opacity: 0;

}

.bcard-wraper {

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

}

.bcard {

height: 100%;

width: 100%;

display: inline-block;

position: relative;

padding: 10px;

}

.bcard-main {

border: 4px solid #337AB7;

padding: 14px 20px;

width: 100%;

height: 100%;

border-radius: 20px;

overflow: hidden;

background: #fff;

transition: 0.5s;

}

.bcard:hover .bcard-main {

position: relative;

z-index: 20;

}

.bcard-inner {

position: relative;

z-index: 50;

height: 100%;

text-align: center;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

}

@media screen and (max-width: 991px) {

.bcard-wraper {

grid-template-columns: repeat(2, minmax(0, 1fr));

}

@media screen and (max-width: 767px) {

.bcard-wraper {

grid-template-columns: repeat(2, minmax(0, 1fr));

}

@media screen and (max-width: 575px) {

.bcard-wraper {

grid-template-columns: repeat(1, minmax(0, 1fr));

}

.bcard {

padding: 5px;

}

JS:

document.addEventListener("DOMContentLoaded", function () {
	var bcards = document.querySelectorAll(".bcard");
	var background = document.querySelector(".background");
	var lastHoveredbcardIndex = 0;
	/* Если нужно запомнить последнее расположение фона */
	/*
	var lastHoveredbcardIndex = localStorage.getItem("lastHoveredbcardIndex") || 0;
	*/
	var bcardRect = bcards[lastHoveredbcardIndex].getBoundingClientRect();
	var x = bcards[lastHoveredbcardIndex].offsetLeft + bcardRect.width / 2;
	var y = bcards[lastHoveredbcardIndex].offsetTop + bcardRect.height / 2;
	background.style.width = bcardRect.width + "px";
	background.style.height = bcardRect.height + "px";
	background.style.transform = `translate(${x - bcardRect.width / 2}px, ${
		y - bcardRect.height / 2
	}px)`;
	background.style.opacity = "0";
	bcards.forEach(function (bcard, index) {
		bcard.addEventListener("mouseenter", function (e) {
			var rect = bcard.getBoundingClientRect();
			x = bcard.offsetLeft + rect.width / 2;
			y = bcard.offsetTop + rect.height / 2;		
			background.style.width = rect.width + "px";
			background.style.height = rect.height + "px";
			background.style.transform = `translate(${x - rect.width / 2}px, ${
				y - rect.height / 2
			}px)`;
			background.style.opacity = "1";
			background.style.top = "0%";
			background.style.left = "0%";
			background.style.transformOrigin = "center";
			/* Если нужно запомнить последнее расположение фона */
			/*
			localStorage.setItem("lastHoveredbcardIndex", index); 
			*/
		});
		bcard.addEventListener("mouseleave", function (e) {
			background.style.opacity = "0";
			background.style.width = "0px";
			background.style.height = "0px";
		});
	});
});

document.addEventListener("DOMContentLoaded", function () {

var bcards = document.querySelectorAll(".bcard");

var background = document.querySelector(".background");

var lastHoveredbcardIndex = 0;

/* Если нужно запомнить последнее расположение фона */

var lastHoveredbcardIndex = localStorage.getItem("lastHoveredbcardIndex") || 0;

var bcardRect = bcards[lastHoveredbcardIndex].getBoundingClientRect();

var x = bcards[lastHoveredbcardIndex].offsetLeft + bcardRect.width / 2;

var y = bcards[lastHoveredbcardIndex].offsetTop + bcardRect.height / 2;

background.style.width = bcardRect.width + "px";

background.style.height = bcardRect.height + "px";

background.style.transform = `translate(${x - bcardRect.width / 2}px, ${

y - bcardRect.height / 2

}px)`;

background.style.opacity = "0";

bcards.forEach(function (bcard, index) {

bcard.addEventListener("mouseenter", function (e) {

var rect = bcard.getBoundingClientRect();

x = bcard.offsetLeft + rect.width / 2;

y = bcard.offsetTop + rect.height / 2;

background.style.width = rect.width + "px";

background.style.height = rect.height + "px";

background.style.transform = `translate(${x - rect.width / 2}px, ${

y - rect.height / 2

}px)`;

background.style.opacity = "1";

background.style.top = "0%";

background.style.left = "0%";

background.style.transformOrigin = "center";

/* Если нужно запомнить последнее расположение фона */

localStorage.setItem("lastHoveredbcardIndex", index);

});

bcard.addEventListener("mouseleave", function (e) {

background.style.opacity = "0";

background.style.width = "0px";

background.style.height = "0px";

});

Пример еще одной секции с такими блоками, в которой нет необходимости ставить элемент <div class="background"></div>:

Контент блока

За основу взято решение, найденное на codepen.io у пользователя Yudiz Solutions Limited

Пример:

HTML:

CSS:

JS:

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

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