pulse background

by sijoma

HTML

<div class="square opacityPulse-css">
</div>
<div class="inner-square">
</div>

CSS

.square {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #fff;
  background-image: URL("https://assets.pippa.io/shows/593eded1acfa040562f3480b/1498193742563-410dd1ca1771ce4bbe597ed412704d37.jpg");
 filter:blur(15px);
 z-index: 0;
  
}

.inner-square {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: 50px;
  background-image: URL("https://assets.pippa.io/shows/593eded1acfa040562f3480b/1498193742563-410dd1ca1771ce4bbe597ed412704d37.jpg");
  background-repeat:no-repeat;
    background-size:contain;
    z-index: 112;
}


.opacityPulse-css {
    animation: opacityPulse 2.5s ease-out;
    animation-iteration-count: infinite; 
    background-repeat:no-repeat;
    background-size:contain;
    opacity: 1;
}

@-webkit-keyframes opacityPulse {
    0% {opacity: 0.3;}
    50% {opacity: 0.7;}
    100% {opacity: 0.3;}
}