Designers have been using tricks to create hover effects forever. Creating a hover effect is not rocket science,
but it is challenging to get it right. We have to make sure that the effect works on all sorts of devices and browsers.
This blog is interesting because the hover effect is used to highlight the image and is subtle.
If you want to get a hover effect on an image, check out this post.
In this post, I am going to teach you how to create hover effects in CSS. A hover effect is basically where you can
define a different style in your CSS for an element when the mouse has hovered over the element.
We have featured this effect on our homepage and the hover effect for the avatar is created using the following steps.
Step – 1 Place This Code in Your Html File
<div class="card">
<img src="ad2.jpg" alt="">
</div>Step – 2 Place This Code in Your CSS File
html, body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
background: #121212;
background-size: cover;
display: table-cell;
vertical-align: middle;
font-family: "Exo 2", sans-serif;
background-color: #312e4a;
color: #d8d8d8;
&:before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.85;
}
}
.card{
width: 300px;
height: 300px;
box-shadow: 0 10px 10px rgba(0,0,0,0.212);
background: white;
display: flex;
border-radius: 20px;
justify-content: center;
position: relative;
transition: all .4s;
}
.card img{
width: 300px;
height: 300px;
box-shadow: 0 10px 10px rgba(0,0,0,0.212);
transition: all .4s;
cursor: pointer;
z-index: 10;
border-radius: 20px;
}
.card:hover img{
margin-top: -30px;
}
.card:hover{
width: 310px;
}
.card::before{
content: '\Hello Dear';
letter-spacing: 0.2em;
position: absolute;
bottom: 8px;
left: 20px;
color:rgb(51,51,51);
font-size: 1em;
font-weight: 700;
}