<style>
.block-image{overflow:hidden}.block-image div{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1.1);filter:grayscale(.2);mix-blend-mode:darken}.block-image div::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:screen}.block-image .red::after{background-color:red}.block-image .lime::after{background-color:#0f0}.block-image .blue::after{background-color:#00f}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){if(window.matchMedia("(min-width:720px)").matches){function a(a,b){return-2/b*a+1}let b=document.querySelectorAll(".block-image");b.forEach(a=>{a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("lime"),a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("blue"),a.children[0].classList.add("red")});let c=document.querySelectorAll(".lime"),d=document.querySelectorAll(".blue");window.addEventListener("mousemove",function(b){let e={x:a(b.clientX,window.innerWidth),y:a(b.clientY,window.innerHeight)};c.forEach(a=>{a.style.left=`${Math.floor(4*e.x)}px`,a.style.top=`${Math.floor(4*e.y)}px`}),d.forEach(a=>{a.style.left=`${Math.floor(4*-e.x)}px`,a.style.top=`${Math.floor(4*-e.y)}px`})})}});
</script>

<style>
.block-image--scroll{overflow:hidden;filter:grayscale(.2)}.block-image--scroll div{position:absolute;top:0;left:0;width:100%;height:100%}.block-image--scroll .blue,.block-image--scroll .lime,.block-image--scroll .red{mix-blend-mode:screen;background-blend-mode:darken;background-size:105%!important}.block-image--scroll .red{background-color:red}.block-image--scroll .lime{background-color:#0f0}.block-image--scroll .blue{background-color:#00f}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){if(window.matchMedia("(min-width:720px)").matches){let a=document.querySelectorAll(".block-image--scroll");a.forEach(a=>{a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("lime"),a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("blue"),a.children[0].classList.add("red")});let b=30,c=0,d=0,e=0;$(document).on("scroll",()=>{c=$(window).scrollTop()});let f=null,g=0;const h=a=>{f&&(g=a-f),d+=(c-d)*g/150,e=c-d;let i=3*e/b,j=2*e/b,k=1*e/b;$(".block-image--scroll .red").css("background-position","center "+i+"px"),$(".block-image--scroll .lime").css("background-position","center "+j+"px"),$(".block-image--scroll .blue").css("background-position","center "+k+"px"),f=a,requestAnimationFrame(h)};requestAnimationFrame(h)}});
</script>

<style>
.image--hover{overflow:hidden}.image--hover div{position:absolute;top:0;left:0;width:100%;height:100%}.image--hover .blue,.image--hover .lime,.image--hover .red{mix-blend-mode:screen;background-blend-mode:darken;transition:all .3s ease-in-out}.image--hover .red{background-color:red;transform:scale(1.1)}.image--hover .lime{background-color:#0f0}.image--hover .blue{background-color:#00f}.image--hover:hover .blue,.image--hover:hover .lime{transform:translate(0,0) scale(1.1)!important}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){let a=document.querySelectorAll(".image--hover");a.forEach(a=>{a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("lime"),a.appendChild(a.querySelector("div").cloneNode(!0)).classList.add("blue"),a.children[0].classList.add("red")});c=document.querySelectorAll(".image--hover .lime"),d=document.querySelectorAll(".image--hover .blue");c.forEach(a=>{a.style.transform=`translate(${1*1}px, ${2*1}px) scale(1.1)`}),d.forEach(a=>{a.style.transform=`translate(${-2*1}px, ${2*1}px) scale(1.1)`})});
</script>