Inward Shadow Hover Effect using HTML and CSS

In the dynamic world of web design, the smallest details can make a big impact on user experience. One subtle yet effective way to add depth and interactivity to your website is through hover effects. Among these, the inward shadow hover effect stands out for its elegance and sophistication.

In this blog post, we’ll embark on a journey to implement the inward shadow hover effect using only HTML and CSS. By harnessing the power of these core web technologies, we’ll unlock the secrets to adding depth and visual interest to your web elements.

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Inward Shadow Pt. 2 by Smashing Magazine (@smashingmag) on CodePen.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Inward Shadow Hover Effect using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<section>
	<h3>Overlay using shadows &mdash; bring the cursor over one of the circles</h3>
	<div class=item><span>The New York Times</span></div>
	<div class=item><span>The Washington Post</span></div>
	<div class=item><span>Los Angeles Times</span></div>
</section>

CSS Code

Create a file style.css and paste the code below.

.item{
	box-shadow: 
		inset var(--itemWidthMinus) var(--itemWidthMinus) 0 black, 
		inset var(--itemWidth) var(--itemWidthMinus) 0 green, 
		inset var(--itemWidthMinus) var(--itemWidth) 0 blue, 
		inset var(--itemWidth) var(--itemWidth) 0 yellow, 
		0 0 20px silver;
	transition: box-shadow ease-in-out .6s, color ease-in-out .5s;	
	width: var(--itemWidth);
	height: var(--itemWidth);
	border-radius: 50%;
	text-align: center;
	background: center/50%  no-repeat;
	cursor: pointer;
	display: grid;
	color: white;
	font-size: calc(var(--itemWidth) / 7);
	grid-row:  2 / 3;
}
.item:hover{
	box-shadow: 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		0 0 20px silver;
	color: transparent;
}
section{
	--itemWidth: min(300px, 30vw);
	--itemWidthMinus: calc(-1 * var(--itemWidth));
	height: max-content;
	width: max-content;
	display: grid;
	grid-template-rows: repeat(2, max-content);
	grid-template-columns: repeat(3, calc(3vw + var(--itemWidth)));
	font-family: 'Averia Serif Libre';
}
.item:first-of-type{
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/New_York_Times_T_icon.svg/359px-New_York_Times_T_icon.svg.png);
}
.item:nth-of-type(2){
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Washington_Post_favicon.png);
}
.item:nth-of-type(3){
	background-image: url(https://pbs.twimg.com/profile_images/1043218383141928961/i7P3LHYw_400x400.jpg);
}
.item > span {
	width: 80%;
	user-select: none; -moz-user-select: none; -webkit-user-select: none;
}
h3{
	grid-row: 1 / 2;
	grid-column: 1 / 4;
	height: 80px;
	width: 90vw;
	text-align: center;
}
body * { place-self: center;}
body {
	display: grid;
	height: 100vh;
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/smashingmag/full/abPOwRm

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖