This was built for a website using Divi Builder. For whatever reason I :before or :after tags couldn’t be used so I made a second div container and placed on top of the image. You can alter the code with before or after on the image if you like.
Code
<style>
.btn-container {
max-width:200px;
max-height:200px;
}
.pulse {
height: 200px !important;
width: 200px;
position: absolute;
z-index: 90;
top: 0px;
left: 0px;
border: solid 13px rgba(255,255,255,.35);
border-radius: 50%;
transition: .25s ease 0s;
-webkit-animation: pulse 1s cubic-bezier(.39,.58,.57,1) .5s infinite;
animation: pulse 1s cubic-bezier(.39,.58,.57,1) .5s infinite;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: pulse;
animation-timeline: auto;
animation-range-start: normal;
}
@keyframes pulse {
0% { transform: scale(.9); opacity: 0.8;}
100% { transform: scale(1.2); opacity: 0;}
}
</style>
<div class=”btn-container”>
<img src=”img url here”>
<div class=”pulse”>
</div>
</div>