Box Hover Effect in HTML CSS
Hover effect is a visual change that occurs when a user hovers their cursor over an element on a website, such as a link or an image. This effect is often used to enhance the user experience and make the website more engaging and interactive.
There are several types of hover effects that can be used to add visual interest and improve the usability of a website. Some common hover effects include changing the color or opacity of an element, displaying additional information or options, or animating the element in some way.
Hover effects can be created using CSS, JavaScript, or a combination of both. CSS is often used to define the initial state of the element and the changes that occur on hover, while JavaScript can be used to add more complex animations and interactions.
When designing hover effects, it’s important to keep the user experience in mind and ensure that the effect is consistent with the overall design and purpose of the website. Overusing hover effects or using them inappropriately can be distracting and confusing for users.
HTML:
<div class="card"> <div class="circle" style="--clr: #fd7015;"> <img src="book.png" class="logo"> </div> <div class="content"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#">Click here to read</a> </div> <img src="book_open.png" class="product_img"> </div>
CSS:
<style type="text/css">
*
{
margin: 10px;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #151515;
}
.card
{
position: relative;
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.5s;
}
.card:hover
{
width: 600px;
transition-delay: 0.5s;
}
.card .circle
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.card .circle:before
{
content: "";
position: absolute;
top: 30;
left: 2;
right: 2;
width: 470px;
height: 470px;
border-radius: 50%;
background: #191919;
border: 8px solid var(--clr);
filter: drop-shadow(0 0 10px (--clr)) drop-shadow(0 0 60px var(--clr));
transition: 0.5s, background 0.5s;
transition-delay: 0.75s, 1s;
}
.card:hover .circle:before
{
transition-delay: 0.5s;
width: 100%;
height: 100%;
border-radius: 20px;
background: var(--clr);
}
.card .circle .logo
{
position: relative;
width: 250px;
transition: 0.5s;
transition-delay: 0.5s;
}
.card:hover .circle .logo
{
transform: scale(0);
transition-delay: 0s;
}
.card .product_img
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0) rotate(315deg);
height: 300px;
transition: 0.5s ease-in-out;
}
.card:hover .product_img
{
transition-delay: 0.75s;
top: 55%;
left: 82%;
height: 320px;
transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
.card .content
{
position: absolute;
width: 60%;
left: 10%;
padding: 20px 20px 20px 20px;
opacity: 0;
transition: 0.5s;
visibility: hidden;
}
.card:hover .content
{
transition-delay: 0.75s;
opacity: 1;
visibility: visible;
left: 3px;
margin-top: 15px;
}
.card .content h2
{
color: #fff;
text-transform: uppercase;
font-size: 2em;
line-height: 1.3em;
}
.card .content p
{
color: #fff;
}
.card .content a
{
position: relative;
color: #fff;
background: #222;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
text-decoration: none;
font-weight: 600;
margin-top: 15px;
}
</style>
Hover effect is a visual change that occurs when a user hovers their cursor over an element on a website, such as a link or an image. This effect is often used to enhance the user experience and make the website more engaging and interactive.
#template #hovereffect #website #hover #menu #sourcecode #html #css #web