image hover

Tutorials of (Image hover) by Sumudu

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>image hover</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  .main
  a(href='#')
    img(src='https://www.wow.lk/wowdocroot/content/1.3/images/2016/newsletters/11-16-01/nl2.jpg')
 .main
  a(href='#')
    img(src='https://www.wow.lk/wowdocroot/content/1.3/images/2016/newsletters/11-16-01/nl2.jpg')
 .main
  a(href='#')
    img(src='https://www.wow.lk/wowdocroot/content/1.3/images/2016/newsletters/11-16-01/nl2.jpg')
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.main {
  width: 270px;
  height: 406px;
  dispaly: block;
  float: left;
  margin-right: 15px;
}
.main:hover {
  animation: work 600ms ease-in-out 1;
}

@keyframes work {
  0% {
    opacity: 0.4;
    transform: rotate(0deg) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  75% {
    opacity: 0.8;
    transform: rotate(15deg);
  }
  80% {
    opacity: 1;
    transform: rotate(10deg);
  }
  88% {
    opacity: 1;
    transform: rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: rotate(-5deg);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( image hover ) is write by sumudu, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © sumudu