Advertisement

Cascading Rainbow Hover Effect with Pure HTML and CSS

Hello friends, in this post I am going to tell how you can create a cascading rainbow hover effect using pure HTML and CSS. You can use this code in any part of a website as long as you put HTML code and CSS code in corresponding HTML and CSS files.


HTML Part

First we are going to create a container div which will have main rainbow div in it. Then we will create 7 individual div for 7 colors of rainbow with class names from 'first' to 'seventh'. That's all for html part. code for html is given below.

HTML code for cascading rainbow hover effect

<body>
    <div class="container">
        <div class="rainbow">
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
            <div class="fourth"></div>
            <div class="fifth"></div>
            <div class="sixth"></div>
            <div class="seventh"></div>
        </div>
    </div>
</body>

CSS Part

In CSS part first we will place our main container in center of webpage by using display grid property. After that we will give size to our container and our all 7 div. After that we will give position absolute to our all div so that they will be stacked on each other.

Once they are stacked on each other we will give color to each of 7 div as well as we will translate Z axis by negative 50px from its previous div starting from 0. Once everything is done we will give preserve 3d property to rainbow div. 

For hover effect we will give transform rotate x and y axis to hover of rainbow div. That's all, now we have a Cascading Rainbow Hover Effect with Pure HTML and CSS.

CSS code for cascading rainbow hover effect

<style>
        body{
            height:90vh;
            width:100%;
            display: grid;
            place-items: center;
            background-color: #111;
        }
        .container{
            width: 100px; height: 100px;
        }
        .rainbow{
            transform-style: preserve-3d;
            transition: 1s transform;
            cursor: pointer;
        }
        .rainbow:hover{
            transform: rotateX(-25deg) rotateY(-50deg);
        }
        .first,.second,.third,.fourth,.fifth,.sixth,.seventh{
            width: 100px;
            height: 100px;
            display: block;
            position:absolute;
        }
        .first{
            background-color: rgba(255, 0, 0, 0.8);
            transform:translateZ(-300px)
        }
        .second{
            background-color: rgba(255, 130, 0, 0.8);
            transform: translateZ(-250px);
        }
        .third{
            background-color: rgba(255, 255, 0, 0.8);
            transform: translateZ(-200px);
        }
        .fourth{
            background-color: rgba(0, 255, 0, 0.8);
            transform: translateZ(-150px);
        }
        .fifth{
            background-color: rgba(0, 0, 255, 0.8);
            transform: translateZ(-100px);
        }
        .sixth{
            background-color: rgba(75, 0, 130, 0.8);
            transform: translateZ(-50px);
        }
        .seventh{
            background-color: rgba(238, 130, 238, 0.8);
            transform: translateZ(0px);
        }
    </style>

Complete Code

Both codes can be used separately in html and CSS file as well as can be used as an internal CSS. Here is whole code of this effect below with internal CSS.

<!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">
    <title>Hover Effect</title>
    <style>
        body{
            height:90vh;
            width:100%;
            display: grid;
            place-items: center;
            background-color: #111;
        }
        .container{
            width: 100px; height: 100px;
        }
        .rainbow{
            transform-style: preserve-3d;
            transition: 1s transform;
            cursor: pointer;
        }
        .rainbow:hover{
            transform: rotateX(-25deg) rotateY(-50deg);
        }
        .first,.second,.third,.fourth,.fifth,.sixth,.seventh{
            width: 100px;
            height: 100px;
            display: block;
            position:absolute;
        }
        .first{
            background-color: rgba(255, 0, 0, 0.8);
            transform:translateZ(-300px)
        }
        .second{
            background-color: rgba(255, 130, 0, 0.8);
            transform: translateZ(-250px);
        }
        .third{
            background-color: rgba(255, 255, 0, 0.8);
            transform: translateZ(-200px);
        }
        .fourth{
            background-color: rgba(0, 255, 0, 0.8);
            transform: translateZ(-150px);
        }
        .fifth{
            background-color: rgba(0, 0, 255, 0.8);
            transform: translateZ(-100px);
        }
        .sixth{
            background-color: rgba(75, 0, 130, 0.8);
            transform: translateZ(-50px);
        }
        .seventh{
            background-color: rgba(238, 130, 238, 0.8);
            transform: translateZ(0px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="rainbow">
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
            <div class="fourth"></div>
            <div class="fifth"></div>
            <div class="sixth"></div>
            <div class="seventh"></div>
        </div>
    </div>
</body>
</html>


Conclusion: Hope this post helped you to understand how you can create cascading rainbow hover effect with pure html and CSS. If you have any issue with this code, you can comment below. Thank you for reading this post.

Post a Comment

0 Comments