CSS image hover effects Circle

CSS image hover effects Circle ini, membuat efek seperti flash circle saat di sorot kursor,

ini contoh css & htmlnya.


<style type="text/css">
.hover15 {
 position: relative;
}
.hover15::before {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 display: block;
 content: '';
 width: 0;
 height: 0;
 background: rgba(255,255,255,.2);
 border-radius: 100%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 opacity: 0;
}
.hover15:hover::before {
 -webkit-animation: circle .75s;
 animation: circle .75s;
}
@-webkit-keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}
@keyframes circle {
 0% {
  opacity: 1;
 }
 40% {
  opacity: 1;
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}
</style>



<div class="hover15 img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8DqKHBQXJJX2FiORFnyXJFktm0QkDTTQggoxHphmIDnXMxha5SMxQNqJYQ9nioF__B2UOWeMGix89c0yU36RTCB_HjFdK2ktAn-CEeMECh4FwpUS20Gi4m4bGNzke7RXhRv46qMwes7WR/s320/beach.jpg" />
</div>