Efectos de desplazamiento con conciencia de dirección en CSS puro

Vista prévia

Descripción

Esta es una implementación CSS pura de los efectos flotantes que se deslizan en función de la dirección en la que entra/sale el ratón. Fuertemente basado en CSS3 cambiará, transformará y cambiará las propiedades.

Funcionamiento

Añadir contenido de superposición personalizado a los elementos de la siguiente:

<div class="row">

<div class="col">


<div class="photo-container" style="background-image:url(1.jpg)"></div>


<h2>Image 1</h2>


<div class="slide">



<p>Hover Effect 1</p>


</div>

</div>

<div class="col">


<div class="photo-container" style="background-image:url(1.jpg)"></div>


<h2>Image 2</h2>


<div class="slide">



<p>Hover Effect 2</p>


</div>

</div>

<div class="col">


<div class="photo-container" style="background-image:url(1.jpg)"></div>


<h2>Image 3</h2>


<div class="slide">



<p>Hover Effect 3</p>


</div>

</div>
</div>

Los estilos básicos para la superposición al pasar el ratón sobre.

.slide {

background: rgba(#190115, 0.8);

padding: 0 1.5rem;
}

Los estilos CSS principales para el efecto Hover con sentido de dirección.

.slide {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

/*


 Visibility delay gives the previously hovered element time to slide out before disappearing.


Remove the `visibility` transition to slide in current element without sliding out previous element

*/

-webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s;

transition: all 0.275s ease-in-out, visibility 0s 0.275s;

visibility: hidden;

will-change: transform;

-webkit-transform: translateY(100%);





transform: translateY(100%);
}

.row:hover ~ .row .slide {

-webkit-transform: translateY(-100%);





transform: translateY(-100%);
}
.row:hover .slide {

-webkit-transform: translateX(100%);





transform: translateX(100%);
}
.row:hover .col:hover ~ .col .slide {

-webkit-transform: translateX(-100%);





transform: translateX(-100%);
}
.row:hover .col:hover .slide {

-webkit-transform: none;





transform: none;

visibility: visible;

-webkit-transition-delay: 0s;





transition-delay: 0s;
}