HTML Hover Card Design are one of the most exciting features to increase user engagement on Web sites. They provide that little extra touch of flair to your design, while not compromising the functionality of it either. Without a doubt, one of the most used objects that people create for hover effects is cards. Described below is an example of HTML Hover Card Design; it is often preferred by web developers and designers since they integrate both good looks and application interactivity.
In this article, we will report the analysis of choice of five best HTML hover card designs to implement on your website. Both designs have different features and ways to upgrade the interactivity of your website so that you prefer one over the other. Starting with basic profile cards created using HTML CSS on to about cards with hover effects, these creations are simple yet elegant and contemporary.
Why Use HTML Hover Card Design on Your Website?
All the hover card designs are not only aesthetic, but they are also utilitarian to some extent. They enable you to put extra information, picture or animation that does not disturb the layout of the site. Incorporation of hovering detail card CSS or CSS info cards with hover effect will create a better way of the users to interact with the contents.
- Using cards, for example profile card html css to display teams or services being offered.
- Designing beautiful blogs layout using CSS for Blog Card Grid CSS.
- Using hovering detail card CSS to display additional product details page with additional links.
These cards are also very interactive and the hover animations add even more design into this work.
1. Profile Card HTML CSS
What Is a Profile Card?
HTML Hover Card Design includes using Profile Card HTML CSS as one of the most common examples. This is true as they are normally employed to post person or corporate details such as names, working positions, and social media handles. Such cards when mouse-over can showcase the below information like short bio, capabilities, or contact option buttons.
Why Are Profile Cards Effective?
Although the profile cards can supplemented by text descriptions or comments, they are perfect to be displayed on team web-site or on personal galleries and portfolios. Uncomplicated and straightforward, which afford users overall impressions of the individual without requiring additional interaction, yet the hover animations provide additional interactions with more detailed information. For example, the hover effect can lead to an increase in the card’s size or change the background color while showing social icons offsets the interactive side.
Section for Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
<style>
/**** Sass Variables ****/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #333;
}
.container {
max-width: 900px;
display: flex;
justify-content: space-evenly;
margin: 0 auto;
}
.card-wrapper {
width: 400px;
height: 500px;
position: relative;
}
.card {
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 450px;
transform: translate(-50%, -50%);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: 0.5s;
.card-image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-color: #000;
transition: .5s;
}
&:hover img {
opacity: 0.4;
transition: .5s;
}
}
.card:hover .card-image {
transform: translateY(-100px);
transition: all .9s;
}
/**** Social Icons *****/
.social-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
li {
list-style: none;
a {
position: relative;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #fff;
font-size: 23px;
color: #333;
font-weight: bold;
margin: 0 6px;
transition: .4s;
transform: translateY(200px);
opacity: 0;
}
}
}
.card:hover .social-icons li a {
transform: translateY(0px);
opacity: 1;
}
.social-icons li a:hover {
background: #000;
transition: .2s;
.fab {
color: #fff;
}
}
.social-icons li a .fab {
transition: .8s;
&:hover {
transform: rotateY(360deg);
color: #fff;
}
}
.card:hover li:nth-child(1) a {
transition-delay: 0.1s;
}
.card:hover li:nth-child(2) a {
transition-delay: 0.2s;
}
.card:hover li:nth-child(3) a {
transition-delay: 0.3s;
}
.card:hover li:nth-child(4) a {
transition-delay: 0.4s;
}
/**** Personal Details ****/
.details {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
width: 100%;
height: 120px;
z-index: 1;
padding: 10px;
h2 {
margin: 30px 0;
padding: 0;
text-align: center;
.job-title {
font-size: 1rem;
line-height: 2.5rem;
color: #333;
font-weight: 300;
}
}
}
.jane {
position: absolute;
bottom: -120px;
left: 0;
opacity: 0;
background: #fff;
width: 100%;
height: 120px;
z-index: 3;
padding: 10px;
transition: .4s;
}
.profile-two .social-icons li a {
border-radius: 50%;
}
.card:hover .profile-img--two {
transform: rotateY(180deg);
}
.card:hover .jane {
bottom: 0;
left: 0;
transition-delay: 0.5s;
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="card-wrapper">
<div class="card">
<div class="card-image">
<img src="https://image.ibb.co/dUTfmJ/profile_img.jpg" alt="profile one">
</div>
<ul class="social-icons">
<li>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
<div class="details">
<h2>John Smith
<br>
<span class="job-title">UI Developer</span>
</h2>
</div>
</div>
</div><!-- end box wrapper -->
<div class="card-wrapper">
<div class="card profile-two">
<div class="card-image profile-img--two">
<img src="https://image.ibb.co/c9rY6J/profile02.jpg" alt="profile two">
</div>
<ul class="social-icons">
<li>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
<div class="details jane">
<h2>Jane Doe
<br>
<span class="job-title">UI Designer</span>
</h2>
</div>
</div>
</div><!-- END box wrapper -->
</div><!-- END container -->
</body>
</html>2. Blog Card Grid CSS
Enhancing Blog Layouts with Grid Cards
Blog Card Grid CSS is highly suitable for website that has articles, news or projects to share. Such cards usually take a picture, a headline, and a short blurb. The hover animations can be applied in order to show additional information which can be a summary or a CTA button.
Why Use Blog Card Grids?
Blog card grids is useful to categorize contents as it is visually pleasing. All the changes to the hover effects make navigation better as they offer the users a glimpse of what they can expect when they click through to the full article. All of these designs are mobile-friendly, so all the visitors using different devices are going to have an equally positive experience.
For example, mouse-over might blow up the image or show when the blog was created – and all this is useful and looks good.
Section for Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');
:root {
--color: #3c3163;
--transition-time: 0.5s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Open Sans';
background: #000000;
}
a {
color: inherit;
}
.cards-wrapper {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 4rem;
padding: 4rem;
margin: 0 auto;
width: max-content;
}
.card {
font-family: 'Heebo';
--bg-filter-opacity: 0.5;
background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
height: 20em;
width: 15em;
font-size: 1.5em;
color: white;
border-radius: 1em;
padding: 1em;
/*margin: 2em;*/
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
box-shadow: 0 0 5em -1em black;
transition: all, var(--transition-time);
position: relative;
overflow: hidden;
border: 6px solid #ccc;
text-decoration: none;
}
.card:hover {
transform: rotate(0);
}
.card h1 {
margin: 0;
font-size: 1.5em;
line-height: 1.2em;
}
.card p {
font-size: 0.75em;
font-family: 'Open Sans';
margin-top: 0.5em;
line-height: 2em;
}
.card .tags {
display: flex;
}
.card .tags .tag {
font-size: 0.75em;
background: rgba(255,255,255,0.5);
border-radius: 0.3rem;
padding: 0 0.5em;
margin-right: 0.5em;
line-height: 1.5em;
transition: all, var(--transition-time);
}
.card:hover .tags .tag {
background: var(--color);
color: white;
}
.card .date {
position: absolute;
top: 0;
right: 0;
font-size: 0.75em;
padding: 1em;
line-height: 1em;
opacity: .8;
}
.card:before, .card:after {
content: '';
transform: scale(0);
transform-origin: top left;
border-radius: 50%;
position: absolute;
left: -50%;
top: -50%;
z-index: -5;
transition: all, var(--transition-time);
transition-timing-function: ease-in-out;
}
.card:before {
background: #ddd;
width: 250%;
height: 250%;
}
.card:after {
background: white;
width: 200%;
height: 200%;
}
.card:hover {
color: var(--color);
}
.card:hover:before, .card:hover:after {
transform: scale(1);
}
.card-grid-space .num {
font-size: 3em;
margin-bottom: 1.2rem;
margin-left: 1rem;
color: rgb(255, 255, 255);
}
.info {
font-size: 1.2em;
display: flex;
padding: 1em 3em;
height: 3em;
}
.info img {
height: 3em;
margin-right: 0.5em;
}
.info h1 {
font-size: 1em;
font-weight: normal;
}
/* MEDIA QUERIES */
@media screen and (max-width: 1285px) {
.cards-wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 900px) {
.cards-wrapper {
grid-template-columns: 1fr;
}
.info {
justify-content: center;
}
.card-grid-space .num {
/margin-left: 0;
/text-align: center;
}
}
@media screen and (max-width: 500px) {
.cards-wrapper {
padding: 4rem 2rem;
}
.card {
max-width: calc(100vw - 4rem);
}
}
@media screen and (max-width: 450px) {
.info {
display: block;
text-align: center;
}
.info h1 {
margin: 0;
}
}</style>
</head>
<body>
<section class="cards-wrapper">
<div class="card-grid-space">
<div class="num">01</div>
<a class="card" href="https://codetheweb.blog/2017/10/06/html-syntax/" style="--bg-img: url(https://wallpapers.com/blog/wp-content/uploads/2023/06/Web-development-concept-with-person-using-a-laptop-computer.jpeg)">
<div>
<h1>HTML Syntax</h1>
<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…</p>
<div class="date">6 Oct 2017</div>
<div class="tags">
<div class="tag">HTML</div>
</div>
</div>
</a>
</div>
<div class="card-grid-space">
<div class="num">02</div>
<a class="card" href="https://codetheweb.blog/2017/10/09/basic-types-of-html-tags/" style="--bg-img: url('https://previews.123rf.com/images/melpomen/melpomen2003/melpomen200300471/141873406-web-development-concept-with-blurred-city-abstract-lights-background.jpg')">
<div>
<h1>Basic types of HTML tags</h1>
<p>Learn about some of the most common HTML tags…</p>
<div class="date">9 Oct 2017</div>
<div class="tags">
<div class="tag">HTML</div>
</div>
</div>
</a>
</div>
<div class="card-grid-space">
<div class="num">03</div>
<a class="card" href="https://codetheweb.blog/2017/10/14/links-images-about-file-paths/" style="--bg-img: url('https://png.pngtree.com/thumb_back/fh260/background/20231002/pngtree-illustration-of-a-3d-render-showcasing-a-concept-of-web-ui-image_13584942.png')">
<div>
<h1>Links, images and about file paths</h1>
<p>Learn how to use links and images along with file paths…</p>
<div class="date">14 Oct 2017</div>
<div class="tags">
<div class="tag">HTML</div>
</div>
</div>
</a>
</div>
<!-- https://images.unsplash.com/photo-1520839090488-4a6c211e2f94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38951b8650067840307cba514b554ba5&auto=format&fit=crop&w=1350&q=80 -->
</section>
</body>
</html>3. Hovering Detail Card CSS
Exploring Interactive Detail Cards
The hovering detail card CSS design will mainly centered on a specific detail card hover interaction technique. These cards are best used in product displays, description of services or any information that may need to be displayed in panels.
Benefits of Hovering Detail Cards
Suspended detail cards demonstrate workable and explicit simplicity while at the same time being subtle. The default state is neat and simple but the hover state may reveal more information one at a time. This approach maintains the simplicity of and does not overload the primary design, but at the same time provides access to supplementation for users interested in such.
For example when hovering over the ‘product card’ you get to see the specifications, price or ‘Buy Now!’ option. This functionality is valuable and the addition of this functionality makes shopping easier and convenient.
Section for Code
<!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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<title> Movie Card Hover Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #090909;
display: grid;
place-items: center;
font-family: Poppins;
}
.card {
width: 250px;
aspect-ratio: 1/1.3;
position: relative;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
}
.card .image-box {
width: 100%;
height: 100%;
overflow: hidden;
}
.card .image-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0) brightness(1);
scale: 1.2;
transition: scale 2s ease-in-out, filter 1s ease-in-out;
}
.card:hover .image-box img {
filter: grayscale(1) brightness(0.7);
scale: 1;
}
.card .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgb(255, 254, 254);
}
.text-box :is(.main, .sub) {
height: 34px;
line-height: 34px;
overflow: hidden;
}
.text-box .main {
font-size: 26px;
font-weight: 600;
text-transform: uppercase;
position: relative;
}
.text-box .sub {
font-size: 14px;
font-weight: 300;
}
.main span,
.sub span {
display: block;
transition: transform 0.5s ease;
}
.main span {
transition-delay: 0.2s;
transform: translateY(100%);
}
.sub span {
transform: translateY(-100%);
transition-delay: 0.5s;
}
.card:hover .text-box :is(span) {
transform: translateY(0%);
}
.text-box::after {
position: absolute;
content: "";
top: 52%;
left: 50%;
width: 102%;
height: 3px;
transform: translate(-50%, -50%) scaleX(0);
transform-origin: left;
transition: 0.5s ease;
background-color: rgb(248, 35, 11);
}
.card:hover .text-box::after {
transform: translate(-50%, -50%) scaleX(1);
}
</style>
</head>
<body class="flex-container">
<div class="card">
<div class="image-box">
<img src="https://resizing.flixster.com/wV52XCdjpWAwT4_kgnKe6hhj0QA=/ems.cHJkLWVtcy1hc3NldHMvdHZzZWFzb24vNTQ4YTNmZTgtMTc4MC00MzBhLTg0NDYtM2JiNGI1ZmMwMzk0LmpwZw==" alt="">
</div>
<div class="text-box">
<div class="main"><span>The Boys</span></div>
<div class="sub"><span>Season 1</span></div>
</div>
</div>
<div class="card">
<div class="image-box">
<img src="https://www.refinery29.com/images/10006376.jpg?format=webp&width=720&height=864&quality=85" alt="">
</div>
<div class="text-box">
<div class="main"><span>The Boys </span></div>
<div class="sub"><span>Season 2</span></div>
</div>
</div>
<div class="card">
<div class="image-box">
<img src="https://pbs.twimg.com/media/FNgNL5zVkAIken_.jpg:large" alt="">
</div>
<div class="text-box">
<div class="main"><span>The Boys</span></div>
<div class="sub"><span>Season 3</span></div>
</div>
</div>
<div class="card">
<div class="image-box">
<img src="https://cdna.artstation.com/p/assets/images/images/020/067/604/large/diiego-designer-the-boys-copia.jpg?1566234003" alt="">
</div>
<div class="text-box">
<div class="main"><span>The Boys</span></div>
<div class="sub"><span>Season 4</span></div>
</div>
</div>
</body>
</html>4. CSS Info Cards with Hover Effect
Informative Yet Interactive
CSS Info Cards With Hover Effect to display snippets of information in a more interesting manner. The use of these cards can be as announcements or highlights or even frequently asked questions The cards are versatile.
Why Choose Info Cards?
Hover effect makes the info cards changes from passive containers of information to active interfaces. For example, text can come in from the right of the page, images can move around in a specified circular path or buttons appear on mouse over. These animations make the cards more colourful and interesting, thus the user is more interacted with during game play.
It is common to see such HTML Hover Card Design in the educational or corporate website since the primary aim is to convey information. The hover effect helps one find more information they want without just loading them with too much information.
Section for Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100vw;
background-color: #1D1D1D;
margin: 0;
font-family: helvetica;
}
.about {
$cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
$transition: 0.6s $cubic;
$size: 40px;
position: fixed;
z-index: 10;
bottom: 10px;
right: 10px;
width: $size;
height: $size;
display: flex;
justify-content: flex-end;
align-items: flex-end;
transition: all 0.2s ease;
.bg_links {
width: $size;
height: $size;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#fff, 0.2);
border-radius: 100%;
backdrop-filter: blur(5px);
position: absolute;
}
.logo {
width: $size;
height: $size;
z-index: 9;
background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: 10px 7px;
opacity: 0.9;
transition: all 1s 0.2s ease;
bottom: 0;
right: 0;
}
.social {
opacity: 0;
right: 0;
bottom: 0;
.icon {
width: 100%;
height: 100%;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
display: flex;
transition: all 0.2s ease, background-color 0.4s ease;
opacity: 0;
border-radius: 100%;
}
&.portfolio {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
}
}
&.dribbble {
transition: all 0.3s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
}
}
&.linkedin {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg);
}
}
}
&:hover {
width: 105px;
height: 105px;
transition: all $transition;
.logo {
opacity: 1;
transition: all 0.6s ease;
}
.social {
opacity: 1;
.icon {
opacity: 0.9;
}
&:hover {
background-size: 28px;
.icon {
background-size: 65%;
opacity: 1;
}
}
&.portfolio {
right: 0;
bottom: calc(100% - 40px);
transition: all 0.3s 0s $cubic;
.icon {
&:hover {
background-color: #698fb7;
}
}
}
&.dribbble {
bottom: 45%;
right: 45%;
transition: all 0.3s 0.15s $cubic;
.icon {
&:hover {
background-color: #ea4c89;
}
}
}
&.linkedin {
bottom: 0;
right: calc(100% - 40px);
transition: all 0.3s 0.25s $cubic;
.icon {
&:hover {
background-color: #0077b5;
}
}
}
}
}
}
.wrapper {
width: 100vw;
margin: 0 auto;
height: 400px;
background-color: #161616;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
.wrapper {
height: 700px;
}
}
.content {
max-width: 1024px;
width: 100%;
padding: 0 4%;
padding-top: 250px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.content {
padding-top: 300px;
flex-direction: column;
}
}
.card {
width: 100%;
max-width: 300px;
min-width: 200px;
height: 250px;
background-color: #292929;
margin: 10px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
border: 2px solid rgba(7, 7, 7, 0.12);
font-size: 16px;
transition: all 0.3s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
transition: all 0.3s ease;
}
.icon {
margin: 0 auto;
width: 100%;
height: 80px;
max-width:80px;
background: linear-gradient(90deg, #FF7E7E 0%, #FF4848 40%, rgba(0, 0, 0, 0.28) 60%);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
transition: all 0.8s ease;
background-position: 0px;
background-size: 200px;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.card .title {
width: 100%;
margin: 0;
text-align: center;
margin-top: 30px;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
}
.card .text {
width: 80%;
margin: 0 auto;
font-size: 13px;
text-align: center;
margin-top: 20px;
color: white;
font-weight: 200;
letter-spacing: 2px;
opacity: 0;
max-height:0;
transition: all 0.3s ease;
}
.card:hover {
height: 270px;
}
.card:hover .info {
height: 90%;
}
.card:hover .text {
transition: all 0.3s ease;
opacity: 1;
max-height:40px;
}
.card:hover .icon {
background-position: -120px;
transition: all 0.3s ease;
}
.card:hover .icon i {
background: linear-gradient(90deg, #FF7E7E, #FF4848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 1;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- about -->
<div class="about">
<a class="bg_links social portfolio" href="# target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social dribbble" href="#" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social linkedin" href="#" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links logo"></a>
</div>
<!-- end about -->
<div class="content">
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">face</i></div>
<p class="title">Profile</p>
<p class="text">Click to see or edit your profile page.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">favorite_border</i></div>
<p class="title">Favourites</p>
<p class="text">Check all your favourites in one place.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">alternate_email</i></div>
<p class="title">Contacts</p>
<p class="text">Add or change your contacts and links.</p>
</div>
<!-- end card -->
</div>
</div>
</body>
</html>5. About Card with Hover Effect
Adding a Personal Touch
The About Card With Hover Effect can be useful when explaining who an individual is, a certain product or service. These cards can be employed on ‘About Us’ web pages, or for the purpose of presenting certain aspects of a company.
How About Cards Stand Out
The stamps that can serve as a foundation creating this kind of cards are their characteristics of images and text, icons and possibility of hover animations. For instance, while a normal state of the ‘about’ can only show a picture combined with a name, changes invoked by hovering can show extra information like a brief description or the company’s purpose.
This HTML Hover Card Design especially contributes to building rapport with the user which brings more personal touch to using such website. He succeeds in making the ultimate blueprint simple and yet highly practical for small business or personal portfolio.
Section for Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
width: 100vw;
min-height: 100vh;
background-color: #050505;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .box {
position: relative;
width: 30rem;
height: 30rem;
margin: 4rem;
}
.container .box:hover .imgBox {
transform: translate(-3.5rem, -3.5rem);
}
.container .box:hover .content {
transform: translate(3.5rem, 3.5rem);
}
.imgBox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transition: all 0.5s ease-in-out;
}
.imgBox img {
width: 30rem;
height: 30rem;
object-fit: cover;
resize: both;
border-radius: 25px
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1.5rem;
display: flex;
justify-content: center;
background-color: #fff;
z-index: 1;
align-items: flex-end;
text-align: center;
transition: 0.5s ease-in-out;
border-radius: 25px
}
.content h2 {
display: block;
font-size: 2rem;
color: #111;
font-weight: 500;
line-height: 2rem;
letter-spacing: 1px;
}
.content span {
color: #555;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: 2px;
}
@media (max-width: 600px) {
.container .box:hover .content {
transform: translate(0, 3.5rem);
}
.container .box:hover .imgBox {
transform: translate(0, -3.5rem);
}
}
/*# sourceMappingURL=main.css.map */
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/938639/pexels-photo-938639.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="content">
<h2>Aman Rajput</br>
<span>Graphic Designer</span></h2>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/1844012/pexels-photo-1844012.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<div class="content">
<h2>Shivani Sharma</br>
<span>Digital Marketing</span></h2>
</div>
</div>
<div class="box">
<div class="imgBox">
<img src="https://images.pexels.com/photos/2085739/pexels-photo-2085739.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<div class="content">
<h2>Rohan Gupta</br>
<span>Chartered Accountant C.A</span></h2>
</div>
</div>
</div>
</body>
</html>Best Practices for Implementing HTML Hover Card Design
To ensure that your hover card designs are effective, keep these tips in mind:
- Keep It Simple: Do not try to fit much material on the card or loading the card with graphically elaborate animations.
- Focus on Performance: You should also make sure that the CSS of the cards and animations are not slow loading so that the cards don’t take time to load.
- Ensure Accessibility: Consider the ability of hover effects as stuck and that does not restrict the users who use the keyboards or touch devices.
- Test Responsiveness: When testing be sure to do it with more than one device or screen size to guarantee proper integration.
If implemented properly, all the above mentioned best practices will enable the user enhance the overall outcome of the task at hand, specifically the HTML Hover Card Design, with minimal obstruction to the flow and organization of the design.
Conclusion of HTML Hover Card Design
Hover and interactive card designs are some of the most important elements in today’s web development. Regardless of whether you’re designing Profile Cards HTML CSS, About Card With Hover Effect, or CSS info cards with hover effect, these elements spice up your site’s interaction.
HTML Hover Card Design is a great way to draw attention to some data, suggest how to interact with content, and make your site more beautiful. Incorporating elements as simple as hover detail card CSS or about cards with resultantly base-hover visual effects would help in setting up the particular differentiating user experience in your website.
For more explanation, click on the link given below to watch the video.
