Hover Effect Like Super Team Deluxe

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

Demo Download

Author Fitri Ali
Hits
Created SEPTEMBER 15, 2018
License Open
Compatible browsers Chrome, 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

Advertisement

Google Matched Content...