TechNology

Welcome to our world

Tech

Cool Hover Effects with CSS

Byyashraj

Jul 30, 2019
Cool Hover Effects with CSS

Here you see the different types of “HOVERING EFFECTS” which is made by the “CSS” language, and of course using “HTML” as an essential language for making any webpage.

You can copy the code and use as you want and for any purpose.

Cool Hover Effects with CSS

Here is a Youtube video for previewing of these codes.

HTML [wp-svg-icons icon=”html5-2″ wrap=”i”] 

<!DOCTYPE html>
<html>
  <head>
    <title>Hovereffects.css</title>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    <link rel="stylesheet" type="text/css" href="hovereffects.css" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen:700" />
  </head>
  <body>
    <div id="intro">
      <div class="container">
        <p>hover effects</p>
        <span>and counting..</span>
      </div>
    </div>
    <div class="part color-1">
      <div class="container">
        <p>Slide up</p>
        <a class="effect slide-up" href="#" data-effect="Home">Home</a>
        <a class="effect slide-up" href="#" data-effect="News">News</a>
        <a class="effect slide-up" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect slide-up" href="#" data-effect="Download">Download</a>
        <a class="effect slide-up" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-2">
      <div class="container">
        <p>Slide down</p>
        <a class="effect slide-down" href="#" data-effect="Home">Home</a>
        <a class="effect slide-down" href="#" data-effect="News">News</a>
        <a class="effect slide-down" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect slide-down" href="#" data-effect="Download">Download</a>
        <a class="effect slide-down" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-3">
      <div class="container">
        <p>Slide left</p>
        <a class="effect slide-left" href="#" data-effect="Home">Home</a>
        <a class="effect slide-left" href="#" data-effect="News">News</a>
        <a class="effect slide-left" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect slide-left" href="#" data-effect="Download">Download</a>
        <a class="effect slide-left" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-4">
      <div class="container">
        <p>Slide right</p>
        <a class="effect slide-right" href="#" data-effect="Home">Home</a>
        <a class="effect slide-right" href="#" data-effect="News">News</a>
        <a class="effect slide-right" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect slide-right" href="#" data-effect="Download">Download</a>
        <a class="effect slide-right" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>

    <div class="part color-5">
      <div class="container">
        <p>Twirl left</p>
        <a class="effect twirl-left" href="#" data-effect="Home">Home</a>
        <a class="effect twirl-left" href="#" data-effect="News">News</a>
        <a class="effect twirl-left" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect twirl-left" href="#" data-effect="Download">Download</a>
        <a class="effect twirl-left" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-6">
      <div class="container">
        <p>Twirl right</p>
        <a class="effect twirl-right" href="#" data-effect="Home">Home</a>
        <a class="effect twirl-right" href="#" data-effect="News">News</a>
        <a class="effect twirl-right" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect twirl-right" href="#" data-effect="Download">Download</a>
        <a class="effect twirl-right" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>

    <div class="part color-7">
      <div class="container">
        <p>Pulse normal</p>
        <a class="effect pulse-normal" href="#" data-effect="Home">Home</a>
        <a class="effect pulse-normal" href="#" data-effect="News">News</a>
        <a class="effect pulse-normal" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect pulse-normal" href="#" data-effect="Download">Download</a>
        <a class="effect pulse-normal" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-8">
      <div class="container">
        <p>Pulse heavy</p>
        <a class="effect pulse-heavy" href="#" data-effect="Home">Home</a>
        <a class="effect pulse-heavy" href="#" data-effect="News">News</a>
        <a class="effect pulse-heavy" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect pulse-heavy" href="#" data-effect="Download">Download</a>
        <a class="effect pulse-heavy" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>

    <div class="part color-9">
      <div class="container">
        <p>Background center</p>
        <a class="effect background-center" href="#" data-effect="Home">Home</a>
        <a class="effect background-center" href="#" data-effect="News">News</a>
        <a class="effect background-center" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect background-center" href="#" data-effect="Download">Download</a>
        <a class="effect background-center" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-10">
      <div class="container">
        <p>Background left</p>
        <a class="effect background-left" href="#" data-effect="Home">Home</a>
        <a class="effect background-left" href="#" data-effect="News">News</a>
        <a class="effect background-left" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect background-left" href="#" data-effect="Download">Download</a>
        <a class="effect background-left" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-1">
      <div class="container">
        <p>Background right</p>
        <a class="effect background-right" href="#" data-effect="Home">Home</a>
        <a class="effect background-right" href="#" data-effect="News">News</a>
        <a class="effect background-right" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect background-right" href="#" data-effect="Download">Download</a>
        <a class="effect background-right" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-2">
      <div class="container">
        <p>Background bottom</p>
        <a class="effect background-bottom" href="#" data-effect="Home">Home</a>
        <a class="effect background-bottom" href="#" data-effect="News">News</a>
        <a class="effect background-bottom" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect background-bottom" href="#" data-effect="Download">Download</a>
        <a class="effect background-bottom" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>

    <div class="part color-3">
      <div class="container">
        <p>Zoom in</p>
        <a class="effect zoom-in" href="#" data-effect="Home">Home</a>
        <a class="effect zoom-in" href="#" data-effect="News">News</a>
        <a class="effect zoom-in" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect zoom-in" href="#" data-effect="Download">Download</a>
        <a class="effect zoom-in" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-4">
      <div class="container">
        <p>Zoom out</p>
        <a class="effect zoom-out" href="#" data-effect="Home">Home</a>
        <a class="effect zoom-out" href="#" data-effect="News">News</a>
        <a class="effect zoom-out" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect zoom-out" href="#" data-effect="Download">Download</a>
        <a class="effect zoom-out" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>

    <div class="part color-5">
      <div class="container">
        <p>Box fill</p>
        <a class="effect box-fill" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill" href="#" data-effect="News">News</a>
        <a class="effect box-fill" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-6">
      <div class="container">
        <p>Box fill left</p>
        <a class="effect box-fill-left" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill-left" href="#" data-effect="News">News</a>
        <a class="effect box-fill-left" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill-left" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill-left" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-7">
      <div class="container">
        <p>Box fill right</p>
        <a class="effect box-fill-right" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill-right" href="#" data-effect="News">News</a>
        <a class="effect box-fill-right" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill-right" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill-right" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-8">
      <div class="container">
        <p>Box fill center</p>
        <a class="effect box-fill-center" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill-center" href="#" data-effect="News">News</a>
        <a class="effect box-fill-center" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill-center" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill-center" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-9">
      <div class="container">
        <p>Box fill skew</p>
        <a class="effect box-fill-skew" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill-skew" href="#" data-effect="News">News</a>
        <a class="effect box-fill-skew" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill-skew" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill-skew" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-10">
      <div class="container">
        <p>Box fill twirl</p>
        <a class="effect box-fill-twirl" href="#" data-effect="Home">Home</a>
        <a class="effect box-fill-twirl" href="#" data-effect="News">News</a>
        <a class="effect box-fill-twirl" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-fill-twirl" href="#" data-effect="Download">Download</a>
        <a class="effect box-fill-twirl" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-1">
      <div class="container">
        <p>Box slide left</p>
        <a class="effect box-slide-left" href="#" data-effect="Home">Home</a>
        <a class="effect box-slide-left" href="#" data-effect="News">News</a>
        <a class="effect box-slide-left" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-slide-left" href="#" data-effect="Download">Download</a>
        <a class="effect box-slide-left" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-2">
      <div class="container">
        <p>Box slide right</p>
        <a class="effect box-slide-right" href="#" data-effect="Home">Home</a>
        <a class="effect box-slide-right" href="#" data-effect="News">News</a>
        <a class="effect box-slide-right" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-slide-right" href="#" data-effect="Download">Download</a>
        <a class="effect box-slide-right" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <div class="part color-3">
      <div class="container">
        <p>Box slide up</p>
        <a class="effect box-slide-up" href="#" data-effect="Home">Home</a>
        <a class="effect box-slide-up" href="#" data-effect="News">News</a>
        <a class="effect box-slide-up" href="#" data-effect="Portfolio">Portfolio</a>
        <a class="effect box-slide-up" href="#" data-effect="Download">Download</a>
        <a class="effect box-slide-up" href="#" data-effect="Contact">Contact</a>
      </div>
    </div>
    <script>
      var intro = document.getElementById('intro');
      var text = intro.getElementsByTagName('p')[0];
      var count = document.getElementsByClassName('part').length;
      text.innerHTML = count + ' ' + text.innerHTML;

      var padding = ((window.outerHeight - intro.clientHeight) / 2) + 'px';
      intro.style.paddingTop = padding;
      intro.style.paddingBottom = padding;
    </script>
  </body>
</html>
</body>
</html>

theme.CSS [wp-svg-icons icon=”css3″ wrap=”i”] 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  margin: 0;
  padding: 0;

  font-family: 'Oxygen', sans-serif;
  text-transform: uppercase;
}

.part {
  padding: 120px 10px;
  color: rgba(0, 0, 0, .4);
}

#intro {
  color: white;
  background: #aaaaaa;
}

#intro span {
  display: block;
  font-size: 75%;
  margin-top: -30px;
}

.part, .color-1 { 
  background: #74cccb;
}

.color-2 {
  background: #edfc41;
}

.color-3 {
  background: #6ad627;
}

.color-4 {
  background: #ff902a;
}

.color-5 {
  background: #d3586d;
}

.color-6 {
  background: #8babfd;
}

.color-7 {
  background: #41fc7d;
}

.color-8 {
  background: #cb43f7;
}

.color-9 {
  background: #d34b4b;
}

.color-10 {
  background: #dbb4b4;
}

.container {
  max-width: 960px;
  text-align: center;
  margin: 0 auto;
}

.container a {
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  font-size: 18px;
} 

.container p {
  padding-bottom: 30px;
}

hovereffects.CSS [wp-svg-icons icon=”css3″ wrap=”i”] 

.effect {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-perspective: 400;
  -moz-perspective: 400;
  -ms-perspective: 400;
  -o-perspective: 400;
  perspective: 400;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1em;
  backface-visibility: hidden;
}
.effect:before, .effect:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transform-origin: center center 0 50%;
  -moz-transform-origin: center center 0 50%;
  -ms-transform-origin: center center 0 50%;
  -o-transform-origin: center center 0 50%;
  transform-origin: center center 0 50%;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: absolute;
  content: attr(data-effect);
  backface-visibility: hidden;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

.effect.slide-up {
  color: transparent;
}
.effect.slide-up:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.slide-up:after {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1em;
}
.effect.slide-up:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  margin-top: -1em;
}
.effect.slide-up:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  margin-top: 0;
}
.effect.slide-down {
  color: transparent;
}
.effect.slide-down:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.slide-down:after {
  color: rgba(255, 255, 255, 0.9);
  margin-top: -1em;
}
.effect.slide-down:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  margin-top: 1em;
}
.effect.slide-down:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  margin-top: 0;
}
.effect.slide-left {
  color: transparent;
}
.effect.slide-left:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.slide-left:after {
  color: rgba(255, 255, 255, 0.9);
  margin-left: -1em;
}
.effect.slide-left:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  margin-left: 1em;
}
.effect.slide-left:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  margin-left: 0;
}
.effect.slide-right {
  color: transparent;
}
.effect.slide-right:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.slide-right:after {
  color: rgba(255, 255, 255, 0.9);
  margin-left: 1em;
}
.effect.slide-right:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  margin-left: -1em;
}
.effect.slide-right:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  margin-left: 0;
}

.effect.twirl-left:after {
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
  color: rgba(255, 255, 255, 0.9);
}
.effect.twirl-left:hover:after {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.effect.twirl-right:after {
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  color: rgba(255, 255, 255, 0.9);
}
.effect.twirl-right:hover:after {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.effect.pulse-normal {
  color: transparent;
}
.effect.pulse-normal:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.pulse-normal:after {
  -webkit-transition: all 0.2s ease-out, -webkit-transform 0.2s cubic-bezier(0.1, 1.5, 0.21, 1);
  -moz-transition: all 0.2s ease-out, -moz-transform 0.2s cubic-bezier(0.1, 1.5, 0.21, 1);
  -o-transition: all 0.2s ease-out, -o-transform 0.2s cubic-bezier(0.1, 1.5, 0.21, 1);
  transition: all 0.2s ease-out, transform 0.2s cubic-bezier(0.1, 1.5, 0.21, 1);
  -webkit-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -o-transform: scale(0.1, 0.1);
  transform: scale(0.1, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.effect.pulse-normal:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.pulse-normal:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.effect.pulse-heavy {
  color: transparent;
}
.effect.pulse-heavy:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.pulse-heavy:after {
  -webkit-transition: all 0.2s ease-out, -webkit-transform 0.2s cubic-bezier(0.1, 2.2, 0.21, 1);
  -moz-transition: all 0.2s ease-out, -moz-transform 0.2s cubic-bezier(0.1, 2.2, 0.21, 1);
  -o-transition: all 0.2s ease-out, -o-transform 0.2s cubic-bezier(0.1, 2.2, 0.21, 1);
  transition: all 0.2s ease-out, transform 0.2s cubic-bezier(0.1, 2.2, 0.21, 1);
  -webkit-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -o-transform: scale(0.1, 0.1);
  transform: scale(0.1, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.effect.pulse-heavy:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.pulse-heavy:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.effect.background-center {
  color: transparent;
}
.effect.background-center:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.effect.background-center:after {
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  top: -10%;
  left: 50%;
  width: 0%;
  height: 120%;
  overflow: hidden;
}
.effect.background-center:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  left: -10%;
  width: 120%;
  z-index: 0;
}
.effect.background-left {
  color: transparent;
}
.effect.background-left:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.effect.background-left:after {
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  top: -10%;
  left: -10%;
  width: 0%;
  height: 120%;
  overflow: hidden;
}
.effect.background-left:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  width: 120%;
  z-index: 0;
}
.effect.background-right {
  color: transparent;
}
.effect.background-right:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.effect.background-right:after {
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  top: -10%;
  right: -10%;
  left: auto;
  width: 0%;
  height: 120%;
  overflow: hidden;
}
.effect.background-right:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  width: 120%;
  z-index: 0;
}
.effect.background-bottom {
  color: transparent;
}
.effect.background-bottom:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.effect.background-bottom:after {
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  top: auto;
  bottom: -10%;
  left: -10%;
  width: 120%;
  height: 0%;
  overflow: hidden;
}
.effect.background-bottom:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  height: 120%;
  z-index: 0;
}

.effect.zoom-in {
  color: transparent;
}
.effect.zoom-in:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.zoom-in:after {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  color: rgba(255, 255, 255, 0.9);
}
.effect.zoom-in:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.zoom-in:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.effect.zoom-out {
  color: transparent;
}
.effect.zoom-out:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}
.effect.zoom-out:after {
  -webkit-transform: scale(1.25, 1.25);
  -moz-transform: scale(1.25, 1.25);
  -ms-transform: scale(1.25, 1.25);
  -o-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
  color: rgba(255, 255, 255, 0.9);
}
.effect.zoom-out:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.zoom-out:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.effect.box-fill {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
}
.effect.box-fill:hover {
  -webkit-box-shadow: inset 0 0 1px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 1px 20px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 1px 20px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-left {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
}
.effect.box-fill-left:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.effect.box-fill-left:hover {
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-left:hover:after {
  right: 0;
}
.effect.box-fill-right {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
}
.effect.box-fill-right:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.effect.box-fill-right:hover {
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-right:hover:after {
  left: 0;
}
.effect.box-fill-center {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
}
.effect.box-fill-center:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 50%;
  margin-left: 0%;
  bottom: 0;
  width: 0%;
  color: transparent;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.effect.box-fill-center:hover {
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-center:hover:after {
  margin-left: -50%;
  width: 100%;
}
.effect.box-fill-skew {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  overflow: hidden;
}
.effect.box-fill-skew:after {
  -webkit-transform: skewX(45deg);
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  transform: skewX(45deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 50%;
  margin-left: 0%;
  bottom: 0;
  width: 0%;
  color: transparent;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.effect.box-fill-skew:hover {
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-skew:hover:after {
  margin-left: -50%;
  width: 100%;
}
.effect.box-fill-twirl {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  overflow: hidden;
  color: transparent;
}
.effect.box-fill-twirl:before, .effect.box-fill-twirl:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: rgba(0, 0, 0, 0.5);
  padding: 6px 0px;
  text-align: center;
}
.effect.box-fill-twirl:after {
  -webkit-transform: scale(0) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -moz-transform: scale(0) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -ms-transform: scale(0) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  -o-transform: scale(0) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  transform: scale(0) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-fill-twirl:hover:before {
  color: transparent;
}
.effect.box-fill-twirl:hover:after {
  -webkit-transform: scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.effect.box-slide-left {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  overflow: hidden;
  color: transparent;
}
.effect.box-slide-left:before, .effect.box-slide-left:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.5);
  padding: 6px 0px;
  text-align: center;
}
.effect.box-slide-left:after {
  background: rgba(0, 0, 0, 0.5);
  left: -100%;
  z-index: 10;
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-slide-left:hover:before {
  color: transparent;
}
.effect.box-slide-left:hover:after {
  left: 0%;
}
.effect.box-slide-right {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  overflow: hidden;
  color: transparent;
}
.effect.box-slide-right:before, .effect.box-slide-right:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.5);
  padding: 6px 0px;
  text-align: center;
}
.effect.box-slide-right:after {
  background: rgba(0, 0, 0, 0.5);
  left: 100%;
  z-index: 10;
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-slide-right:hover:before {
  color: transparent;
}
.effect.box-slide-right:hover:after {
  left: 0%;
}
.effect.box-slide-up {
  border: solid 2px rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  overflow: hidden;
  color: transparent;
}
.effect.box-slide-up:before, .effect.box-slide-up:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  color: rgba(0, 0, 0, 0.5);
  padding: 6px 0px;
  text-align: center;
}
.effect.box-slide-up:after {
  background: rgba(0, 0, 0, 0.5);
  top: 100%;
  z-index: 10;
  color: rgba(255, 255, 255, 0.9);
}
.effect.box-slide-up:hover:before {
  color: transparent;
}
.effect.box-slide-up:hover:after {
  top: 0%;
}

By yashraj

Related Post

Tech

Google New Policy Will Kill Third-Party Call Recording Apps

Apr 22, 2022 yashraj
Tech

WhatsApp Pay Can Now Be Rolled out to 100 Million Users

Apr 14, 2022 yashraj
Tech

Elon Musk Now Wants to Buy Twitter

Apr 14, 2022 yashraj

Leave a Reply

Your email address will not be published. Required fields are marked *

You missed

Oneplus Smartphone

Oneplus 10 Pro Specification

Sep 10, 2022 yashraj
Tech

Google New Policy Will Kill Third-Party Call Recording Apps

Apr 22, 2022 yashraj
Tech

WhatsApp Pay Can Now Be Rolled out to 100 Million Users

Apr 14, 2022 yashraj
Tech

Elon Musk Now Wants to Buy Twitter

Apr 14, 2022 yashraj