Dots hover

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

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
Copyright ebakernz ©


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

  <meta charset="UTF-8">
  <title>Dots hover</title>
    <link rel="stylesheet" href="">

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



<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="" 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
      <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
      <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
  <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>




/*Downloaded from */
/* 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);