An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Linear Gradient Animation in CSS
Hey fellow creators
You cant really create a hover animation between two linear gradients in CSS, but theres a way around it... Lets learn what it is in less than a minute!
If you prefer to watch the video version, it's right here :
1. The HTML structure.
Create a card with a title:
<div class="card"> <div class="layer"></div> <h1>So Paulo</h1></div>
2. Style the card.
Give the card a width and a height, center it and its content and add a background:
.card { width: 400px; height: 400px; border-radius: 25px; margin: 100px auto; position: relative; z-index: 1; background: linear-gradient(to right, #2193b0, #6dd5ed); display: flex; justify-content: center; align-items: center; cursor: pointer;}.card h1 { color: #f1f1f1; font-size: 50px; text-transform: uppercase;}
Create a new layer with the pseudo-element after:
.card::after { content:""; width: 100%; height: 100%; border-radius: 25px; background: linear-gradient(to right, #8a2387, #e94057, #f27121); position: absolute; z-index: -1; opacity: 0; transition: opacity 0.4s ease-in-out;}
It will take up the whole size of the card but with a new color. It will be located between the content and the container. It has no opacity for now.
Finally, add a different opacity to the pseudo element when you hover the card:
.card:hover::after { opacity: 1;}
Now you have a transition between your two linear gradients! Check out source code here to see the final outcome!
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
Original Link: https://dev.to/ziratsu/linear-gradient-animation-in-css-6cb
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To