Item: Dots hover
Rating: 3.4
Author: ebakernz

0 Downloads
6 Views
Tweet
Download Now View Demo

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

More from ebakernz

Dots hover

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

Technologies

Comments

More from ebakernz

A Pen by Emma

A Pen by Emma

Shapes logo

Dots hover

You Might Also Like

AngularJS Form Boilerplate

A Pen by Ryan P. C. McQuen

Flubby navigation 2

Reverse List

Simulate SVG paths are drawn using CSS animation

A Pen by Irakli Tsaishvili

30 Days of Vue - Day 5 -Watching for changes

Color wave