SE SUPONE QUE SUS DESCRIPCIONES SE DEBEN OCULTAR NI BIEN TERMINA DE CARGAR LA PAGINA
SE SUPONE QUE AL HACER HOVER EN LOS PRODUCTOS DEBERIA DE MOSTRARSE SU DESCRIPCION
**Además la descripción se muestra con una animación particular **
**y también se va con una animación particular **
*lo cual solo pasa cuando selección por ID y solo ocurre en el primer elemento *
Estuve investigando tooooooooodo, el día, probe seleccionar por ID por Clase, usar QuerySelectors, Buscar la forma de hacerlo cíclicamente, pero aún no consigo lo deseado que es esto:
Carga la página, y ningún producto tiene descripción, lo cual entiendo que equivale a que la misma esta con la propiedad visibility : hidden; Okey, luego, cuando se pasa el mouse por alguno de los productos, entonces:
1.- aparece la descripción con su respectiva animación. 2.- se cambia la propiedad de esa descripción a visibility: visible; (ya que la característica de la animación de salida oculta el elemento sin necesidad de esta propiedad)
por ultimo: cuando se sale afuera del elemento: ocurre la animación de salida que hace que la descripcion desaparezca sutilmente..
El punto es que si la propiedad visibility no se cambia a "visible" sacar el hover del producto, la descripción se desaparece bruscamente y no sutilmente, por eso es necesario que se mantenga como visible después de la primera interacción, y solo después de la primera. ☺♥
Tremendo caos todo esto, pero bueno, no encuentro solución, y es algo tan simple lo que necesito, dios santo
const producto = document.querySelectorAll(".productos");
const descripciones = document.querySelectorAll(".descripcion");
// REACCIONAR CUANDO EL MOUSE ESTA EN EL PRODUCTO :
producto.addEventListener("mouseover", ()=>{
descripciones.classList.add("text-in")
descripciones.classList.remove("text-out")
});
// REACCIONAR CUANDO EL MOUSE SE VA DEL PRODUCTO :
producto.addEventListener("mouseout", ()=>{
descripciones.classList.add("text-out")
descripciones.classList.remove("text-in")
});
// OCULTAR DESCRIPCIONES CUANDO CARGA LA PAGINA.
const numeroDeProductos = descripciones.length;
function ocultar() {for (var i = 0; i < numeroDeProductos; i++) {descripciones[i].classList.add("ocultar");}}
window.addEventListener("load", ()=> {ocultar();});
</script>
<!-- SCRIPT OPCION 2 -->
<script>
const producto = document.querySelectorAll(".productos");
const descripciones = document.querySelectorAll(".descripcion");
// OCULTAR DESCRIPCIONES CUANDO CARGA LA PAGINA.
const numeroDeProductos = descripciones.length;
function ocultar() {for (var i = 0; i < numeroDeProductos; i++) {descripciones[i].classList.add("ocultar");}}
window.addEventListener("load", ()=> {ocultar();});
// REACCIONAR CUANDO EL MOUSE SE VA DEL PRODUCTO :
function mouseArriba() {
descripciones.classList.add("text-in");
descripciones.classList.remove("text-out");
}// REACCIONAR CUANDO EL MOUSE ESTA EN EL PRODUCTO :
function mouseAfuera() {
descripciones.classList.add("text-in")
descripciones.classList.remove("text-out")
}
descripciones.forEach(element => {element.addEventListener("mouseover",mouseArriba)});
descripciones.forEach(element => {element.addEventListener("mouseout",mouseAfuera)});
.contenedorGrupal{
padding-top: 30px;
display: flex;
flex-wrap: wrap ;
justify-content: center;
}
.productos{
padding-bottom: 15px;
margin: 15px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.productos:hover{
background-color: rgba(236, 97, 139, 0.432);
transition: 2s;
transform: scale(1.2);
cursor: pointer;
}
.descripcion {
padding: 5px 35px;
white-space: wrap;
overflow: hidden;
text-align: center;
}
.ocultar{visibility: hidden;}
.imgProducto{width: 150px;}
/*. aparece texto */
.text-in {animation: text-in 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
@keyframes text-in {
0% {
filter: blur(12px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
visibility: visible;
}
}
/*. desaparece texto */
.text-out {animation: text-out 0.3s cubic-bezier(0.600, 0.040, 0.980, 0.335) both;}
@keyframes text-out {
0% {
filter: blur(0.01);
}
100% {
filter: blur(12px) opacity(0%);
visibility: visible;
}
}
<section class="CONTENEDOR_TOTAL">
<div class="contenedorGrupal">
<article class="productos">
<img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
<h4 class="descripcion">Breve descripcion del producto</h4>
</article>
<article class="productos">
<img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
<h4 class="descripcion">Breve descripcion del producto</h4>
</article>
<article class="productos">
<img class="imgProducto" src="/recursos/producto ejemplo.png" alt="">
<h4 class="descripcion">Breve descripcion del producto</h4>
</article>
</div>
</section>