CSS Gradient Hover Effect | Efecto gradiente en imagen

CSS Gradient Hover Effect | Efecto gradiente en imagen al pasar cursor.

By Jon Daiello

DEMO
HTML

<a class="c-preview">
<div class="c-preview__img"></div>
<h2 class="c-preview__title">Gradient Hover Effect</h2>
</a>

CSS

body{font-family:'Segoe UI','San Francisco',Calibri,Helvetica,Arial,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh}
.c-preview{background:0 0/400% 400% no-repeat #000;background:-moz-linear-gradient(-45deg,#000 0,#000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%);background:-webkit-linear-gradient(-45deg,#000 0,#000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%);background:linear-gradient(135deg,#000 0,#000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%);display:flex;width:500px;height:500px;max-width:100vw;max-height:100vh;justify-content:center;align-items:center;color:#fff;position:relative;cursor:pointer;transition:.5s all}
.c-preview__img{position:absolute;left:0;top:0;background:url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) center center/cover no-repeat #000;width:100%;height:100%;z-index:1;opacity:.5;mix-blend-mode:screen}
.c-preview__title{position:relative;z-index:10;text-transform:uppercase;letter-spacing:.05em}
.c-preview:hover{background-position:100% 100%}
.c-preview:hover__title{text-shadow:0 0 20px #000}
¿Te gusto el post?
¡Compártelo!