Hover Effect Like Super Team Deluxe

Hover Effect Like Super Team Deluxe developed using CSS and HTML. Demo and Download options available.

HTML Snippet

<h1>Choose Your Weapon</h1> <div class="container">   <div class="product">     <div class="effect-1"></div>     <div class="effect-2"></div>     <div class="content">       <div class="exercise"></div>     </div>     <span class="title">       Exercise       <span>Boost Endorphins</span>     </span>   </div>   <div class="product">     <div class="effect-1"></div>     <div class="effect-2"></div>     <div class="content">       <div class="sleep"></div>     </div>     <span class="title">       Sleep       <span>Restore Balance</span>     </span>   </div>   <div class="product">     <div class="effect-1"></div>     <div class="effect-2"></div>     <div class="content">       <div class="meditation"></div>     </div>     <span class="title">       Meditation       <span>Practice gratitude</span>     </span>   </div> </div> <div class="twitter"><i class="fab fa-twitter"></i><a href="https://twitter.com/fitriirl">@FITRIIRL</a></div>

CSS Code

body {   background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);   font-family: "Josefin Slab";   height: 100vh; }  h1 {   font-size: 2.2rem;   margin-top: 80px;   text-align: center; }  .container {   display: flex;   flex-wrap: wrap;   max-width: 600px;   margin: 1vw auto;   position: relative;   text-align: center;   width: 94vw; }  .product {   flex: auto;   font-size: 1.5rem;   margin: 0 1vw calc(1vw + 50px) 1vw;   min-width: calc(33% - 2vw);   position: relative; }  .product:before {   content: "";   float: left;   padding-top: 100%; }  .content {   background: white;   border-radius: 30%;   height: 84%;   margin: 8%;   position: absolute;   width: 84%;   vertical-align: middle;   z-index: 5000; }  .product:hover .effect-1, .product:hover .effect-2 {   display: block; }  .effect-1, .effect-2 {   border-radius: 30%;   display: none;   mix-blend-mode: multiply;   height: 84%;   opacity: 1;   position: absolute;   width: 84%;   z-index: 3000; }  .effect-1 {   animation: rotate 1.8s linear infinite;   background: cyan; }  .effect-2 {   animation: rotate 1.2s linear reverse infinite;   background: #e7a9ff; }  @keyframes rotate {   0% {     top: 0;     left: 8%;   }   25% {     top: 8%;     left: 0%;   }   50% {     top: 16%;     left: 8%;   }   75% {     top: 8%;     left: 16%;   }   100% {     top: 0;     left: 8%;   } }  .title {   position: relative;   top: calc(100% + 16px); }  .title span {   display: block;   font-family: Helvetica, Arial, Sans-Serif;   font-size: 0.6rem;   letter-spacing: 0.1rem;   margin-top: 8px;   text-transform: uppercase; }  .exercise {   background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);   border-radius: 5px;   height: 50%;   margin: 25%;   width: 50%; }  .sleep {   background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);   border-radius: 50%;   height: 50%;   margin: 25%;   width: 50%; }  .meditation {   background-image: linear-gradient(     to top,     #f3e7e9 0%,     #e3eeff 99%,     #e3eeff 100%   );   border-radius: 5px;   height: 40%;   margin: 30%;   transform: rotate(45deg);   width: 40%; }  .twitter {   background-image: linear-gradient(     to top,     #1e3c72 0%,     #1e3c72 1%,     #2a5298 100%   );   border-radius: 14px;   bottom: 20px;   color: #fff;   font-weight: 400;   letter-spacing: 0.1rem;   line-height: 28px;   padding: 0 12px;   position: fixed;   right: 20px;   z-index: 5000; }  .twitter i {   margin-right: 6px;   position: relative;   top: 2px; }  .twitter a {   color: #fff;   font-family: Helvetica, Arial, Sans-Serif;   font-size: 0.7rem;   text-decoration: none; }

Preview