How To Create Character Gallery Hover Effect In HTML CSS

codinglabsolution

 Character Gallery Hover Effect In HTML CSS

In this tutorial, we'll explore how to create an engaging character gallery hover effect using HTML and CSS. This effect will add interactivity to your website or project, allowing users to interact with character images by revealing additional information upon hover. By combining basic HTML structure with CSS styling and transitions, we'll achieve a visually appealing hover effect that enhances the user experience.

How To Create Character Gallery Hover Effect In HTML CSS.[Source Code]

To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.

<div class="container"> <div class="box box-1" style="--img: url(https://codetheworld.io/wp-content/uploads/2023/11/yLGjKoB_Renji.jpg);" data-text="Renji"></div> <div class="box box-2" style="--img: url(https://codetheworld.io/wp-content/uploads/2023/11/yLGjKoB_Sora.jpg);" data-text="Sora"></div> <div class="box box-3" style="--img: url(https://codetheworld.io/wp-content/uploads/2023/11/yLGjKoB_Kaito.jpg );" data-text="Kaito"></div> <div class="box box-4" style="--img: url(https://codetheworld.io/wp-content/uploads/2023/11/yLGjKoB_Mitsui_1.jpg);" data-text="Tsuki"></div> <div class="box box-5" style="--img: url(https://codetheworld.io/wp-content/uploads/2023/11/yLGjKoB_Mitsui.jpg);" data-text="Mitsui"></div> </div>
CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.


@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Figtree", sans-serif;
}

body {
	display: grid;
	place-content: center;
	min-height: 100vh;
	background: #000;
}

.container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1em;
	width: 800px;
	height: 500px;
	transition: all 400ms;
}

.container:hover .box {
	filter: grayscale(100%) opacity(24%);
}

.box {
	position: relative;
	background: var(--img) center center;
	background-size: cover;
	transition: all 400ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container .box:hover {
	filter: grayscale(0%) opacity(100%);
}

.container:has(.box-1:hover) {
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.container:has(.box-2:hover) {
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.container:has(.box-3:hover) {
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.container:has(.box-4:hover) {
	grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.container:has(.box-5:hover) {
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
	transform: translateY(-16px);
}

.box:nth-child(even) {
	transform: translateY(16px);
}

.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background: #000;
	color: #fff;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}

.box:hover::after {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 400ms;
}

We trust that you'll appreciate this captivating How To Create Character Gallery Hover Effect In HTML CSS.

How To Create Character Gallery Hover Effect In HTML CSS, please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.

codinglabsolution says...
code copied

تعليق واحد

  1. You are creative, brother
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.