box hover over effects using pulsate animation

Bit of a different box hover over effect. Just using the pulse animation.

HTML

<div class="pulsate-box"></div>

CSS

.pulsate-box {
  height: 300px;
  width: 200px;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.pulsate-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.pulsate-box:hover {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.8);
}

.pulsate-box:hover:before {
  transform: scale(2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    background: rgb(255 255 255 / 80%);
  }

  50% {
    background: rgb(0 0 0 / 20%);
  }

  100% {
    background: rgb(255 255 255 / 80%);
  }
}

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 194 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown