Hover Effect Like Super Team Deluxe

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

Demo Download

AuthorFitri Ali
CreatedSEPTEMBER 15, 2018
LicenseOpen
Compatible browsersChrome, Firefox, Safari

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

Hover Effect Like Super Team Deluxe Preview

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *