Labels

Image Hover Text Overlay Effect with HTML & CSS

In this tutorial, you'll create an "image hover text" effect using HTML and CSS. This is perfect for photo galleries or company websites when listing employees.

Video Tutorial

Source Code

You can find the source code for this video below. Alternatively, browse it on CodePen. 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Hover Text Effect with HTML & CSS</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="image">
		<img class="image__img" src="" alt="Bricks">
		<div class="image__overlay image__overlay--primary">
			<div class="image__title">Bricks</div>
			<p class="image__description">
				Here we have a brick wall.
			</p>
		</div>
	</div>
</body>
</html>
.image {
	position: relative;
	width: 400px;
}

.image__img {
	display: block;
	width: 100%;
}

.image__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s;
}

.image__overlay--blur {
	backdrop-filter: blur(5px);
}

.image__overlay--primary {
	background: #009578;
}

.image__overlay>* {
	transform: translateY(20px);
	transition: transform 0.25s;
}

.image__overlay:hover {
	opacity: 1;
}

.image__overlay:hover>* {
	transform: translateY(0);
}

.image__title {
	font-size: 2em;
	font-weight: bold;
}

.image__description {
	font-size: 1.25em;
	margin-top: 0.25em;
}

If you have any questions about this code, please leave a comment on the video.

Labels:

Comments

Post a Comment

Popular Posts