<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <figure> <img src="https://unsplash.it/500/500/?random"> </figure> </div> </div>

*{box-sizing:border-box;margin:0;padding:0;} figure{ display:inline-block; position:relative; } img{ vertical-align:middle; transition:-webkit-filter .25s linear 99999s,filter .25s linear 99999s; } img:hover{ -webkit-filter:grayscale(1); filter:grayscale(1); transition-delay:0s; } figure::after{ animation:colours 5s linear infinite; bottom:0; content:""; left:0; mix-blend-mode:overlay; opacity:0; pointer-events:none; position:absolute; right:0; top:0; transition:opacity .25s linear 99999s; } figure:hover::after{ opacity:.75; transition-delay:0s; } figure.paused::after{ animation-play-state:paused; } @keyframes colours{ 0%{background:#f00;} 16.667%{background:#ff0;} 33.333%{background:#0f0;} 50%{background:#0ff;} 66.667%{background:#00f;} 83.333%{background:#f0f;} 100%{background:#f00;} }

var figure=document.querySelector("figure"), img=figure.querySelector("img"), timer; img.addEventListener("mousemove",function(){ clearTimeout(timer); figure.classList.remove("paused"); setTimeout(function(){ figure.classList.add("paused"); },300); },0);