Mouseover focus

by jorgeluis

HTML

<img src="https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?auto=format&fit=crop&w=800&q=80" alt="loggerhead sea turtle">

<p>
Gorgeous photo of a loggerhead sea turtle by <a href="https://unsplash.com/photos/L-2p8fapOA8">@Wexor Tmg</a>
</p>

CSS

img {
  -webkit-filter: blur(3px) saturate(0);
  filter: blur(3px) saturate(0);
}

img.active {
  -webkit-animation: filter-animation 1s 1;
  animation: show-color 1s 1;
  
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}


@-webkit-keyframes show-color {
  100% {
    -webkit-filter: blur(0) saturate(2);
  }
}

JavaScript

var i = document.querySelector('img');

i.addEventListener('mouseover', function() {
	i.classList.toggle('active');
});