This code snippet helps you to create a hover animation. It represents a web page that contains two sections: “All Games” and “What’s new?”. The “All Games” section displays four game cards with images and captions, while the “What’s new?” section displays two news articles with images, headlines, and descriptions. The code uses div elements to create a container with the class “wrapper” to hold all the content, and nested div elements with the classes “cards” and “news” to group the game cards and news articles, respectively.
The code also uses h2 and strong tags to create headings and span tags to display the number of games. The code can be used to create a gaming website or a website that provides news and updates about games.
How to Create CSS with Hover Animation
First of all, load the following assets into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans&display=swap" rel="stylesheet">
Create the HTML structure for the hover animation as follows:
<div class="wrapper"> <h2><strong>All Games<span>( 4 )</span></strong></h2> <div class="cards"> <figure class="card"> <img src="https://www.linkpicture.com/q/1_1484.jpg" /> <figcaption>Dota 2</figcaption> </figure> <figure class="card"> <img src="https://www.linkpicture.com/q/2_965.jpg" /> <figcaption>Stick Fight</figcaption> </figure> <figure class="card"> <img src="https://www.linkpicture.com/q/3_695.jpg" /> <figcaption>Minion Masters</figcaption> </figure> <figure class="card"> <img src="https://www.linkpicture.com/q/4_543.jpg" /> <figcaption>KoseBoz!</figcaption> </figure> </div> <h2><strong>What's new?</strong></h2> <div class="news"> <figure class="article"> <img src="https://www.linkpicture.com/q/news1_1.jpg" /> <figcaption> <h3>New Item</h3> <p> In today’s update, two heads are better than one, and three heads are better than that, as the all-new Flockheart’s Gamble Arcana item for Ogre Magi makes its grand debut. </p> </figcaption> </figure> <figure class="article"> <img src="https://www.linkpicture.com/q/news2.png" /> <figcaption> <h3>Update</h3> <p> Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available. </p> </figcaption> </figure> </div> </div>
Now, style the hover animation using the following CSS styles:
.abs,
h2:after,
.cards .card figcaption,
.cards .card:after,
.news .card figcaption,
.news .card:after,
.news .article figcaption {
position: absolute;
}
.rel,
h2,
h2 strong,
.cards .card,
.news .card,
.news .article {
position: relative;
}
.fix {
position: fixed;
}
.dfix {
display: inline;
}
.dib {
display: inline-block;
}
.db {
display: block;
}
.dn {
display: none;
}
.df,
.cards,
.news {
display: flex;
}
.dif {
display: inline-flex;
}
.dg {
display: grid;
}
.dig {
display: inline-grid;
}
.vm,
h2,
h2 strong,
h2 span {
vertical-align: middle;
}
body {
background: #24282f;
font-family: 'Alegreya Sans';
}
.wrapper {
padding: 15px;
}
h2 {
padding: 10px;
padding-left: 25px;
color: #ccc;
margin: 0;
}
h2 strong {
z-index: 2;
background: #24282f;
padding: 4px 8px;
}
h2 span {
font-size: 0.7em;
color: #aaa;
margin-left: 10px;
}
h2:after {
content: '';
z-index: 1;
bottom: 50%;
margin-bottom: -2px;
height: 2px;
left: 0;
right: 0;
background: #373d47;
}
.cards,
.news {
flex-flow: row wrap;
}
.cards .card,
.news .card {
margin: 20px;
width: 180px;
height: 270px;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0,0,0,0.8);
transform-origin: center top;
transform-style: preserve-3d;
transform: translateZ(0);
transition: 0.3s;
}
.cards .card img,
.news .card img {
width: 100%;
min-height: 100%;
}
.cards .card figcaption,
.news .card figcaption {
bottom: 0;
left: 0;
right: 0;
padding: 20px;
padding-bottom: 10px;
font-size: 20px;
background: none;
color: #fff;
transform: translateY(100%);
transition: 0.3s;
}
.cards .card:after,
.news .card:after {
content: '';
z-index: 10;
width: 200%;
height: 100%;
top: -90%;
left: -20px;
opacity: 0.1;
transform: rotate(45deg);
background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
transition: 0.3s;
}
.cards .card:hover,
.news .card:hover,
.cards .card:focus,
.news .card:focus,
.cards .card:active,
.news .card:active {
box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
transform: translateY(-3px) scale(1.05) rotateX(15deg);
}
.cards .card:hover figcaption,
.news .card:hover figcaption,
.cards .card:focus figcaption,
.news .card:focus figcaption,
.cards .card:active figcaption,
.news .card:active figcaption {
transform: none;
}
.cards .card:hover:after,
.news .card:hover:after,
.cards .card:focus:after,
.news .card:focus:after,
.cards .card:active:after,
.news .card:active:after {
transform: rotate(25deg);
top: -40%;
opacity: 0.15;
}
.news .article {
overflow: hidden;
width: 350px;
height: 235px;
margin: 20px;
}
.news .article img {
width: 100%;
min-height: 100%;
transition: 0.2s;
}
.news .article figcaption {
font-size: 14px;
text-shadow: 0 1px 0 rgba(51,51,51,0.3);
color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 40px;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
background: rgba(6,18,53,0.6);
opacity: 0;
transform: scale(1.15);
transition: 0.2s;
}
.news .article figcaption h3 {
color: #3792e3;
font-size: 16px;
margin-bottom: 0;
font-weight: bold;
}
.news .article:hover img,
.news .article:focus img,
.news .article:active img {
filter: blur(3px);
transform: scale(0.97);
}
.news .article:hover figcaption,
.news .article:focus figcaption,
.news .article:active figcaption {
opacity: 1;
transform: none;
}
That’s all! hopefully, you have successfully created CSS with hover animation. If you have any questions or suggestions, feel free to comment below.
