Dots hover

In this example below you will see how to do a Dots hover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ebakernz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ebakernz ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dots hover</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="service">
						
  <div class="icon"><img src="images/Asset-12.png" alt="Asset 12"></div>
  <h3 class="red-text">Tenders &amp; RFP's</h3>

  <svg xmlns="http://www.w3.org/2000/svg" width="50.833" height="17.5" viewBox="0 0 50.833 17.5">
    <g class="dot-group">    
       <path class="one" fill="#D32629" d="M12.632,8.966c0,1.795-1.455,3.25-3.25,3.25c-1.794,0-3.25-1.455-3.25-3.25s1.455-3.25,3.25-3.25
        C11.177,5.716,12.632,7.171,12.632,8.966"/>
      <path class="two" fill="#D32629" d="M28.633,8.966c0,1.795-1.455,3.25-3.25,3.25s-3.25-1.455-3.25-3.25s1.455-3.25,3.25-3.25
        S28.633,7.171,28.633,8.966"/>
      <path class="three" fill="#D32629" d="M43.633,8.966c0,1.795-1.455,3.25-3.25,3.25s-3.25-1.455-3.25-3.25s1.455-3.25,3.25-3.25
        S43.633,7.171,43.633,8.966"/>
    </g>
  </svg>
						
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum elementum suscipit. Nunc dapibus vel sapien sed porta. Ut dui sem, convallis et consectetur vel, volutpat vitae risus</p>
						
  <a class="readmore" href="/services/?service=tenders-&amp;-rfps">Find out more</a>

</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ebakernz/dots-hover-Rgzawm */
/* svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
} */
.one, .two, .three {
  transition: 300ms all;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.two {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.three {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.service:hover path {
  -webkit-animation-name: grow;
          animation-name: grow;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
}

@-webkit-keyframes grow {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@keyframes grow {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

Comments