2

les dejo aquí estas imágenes y ahora les explico.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Bien. La imagen 1 representa lo que estoy haciendo, es un contenedor flexbox con 4 items dentro que al pulsar la flecha se van desplazando de 2 en 2, dejando los 2 primeros atrás.

Primer problema: (imagen 2) Como ven en la imagen 2, la únicamente la última caja (despues de hacer todo el scroll hacia la derecha y mostrar todos los elementos) se queda pegado al final del contenedor sin responder ante márgenes o paddings derechos (Los margin/padding top/left/bottom funcionan perfectamente!) Por lo cual, con este problema, no puedo mantener la relación de aspecto con respecto al resto de items.

Segundo problema: (imagen 3) En la imagen 3 estoy intentando hacer algo, y es que un contenedor (.card (que son los elementos que están dentro del contenedor rojo (#cards)) al hacer un hover sobre él cambie su height y sobresalga por encima del rojo para ver las tallas, boton de añadir al carro..etc.

Dejo un ejemplo mas claro:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

En la imagen 5 pongo el raton encima del producto.

Aquí les dejo el código, espero que me puedan ayudar y decirme que me está faltando y fallando.

muchas gracias!!

HTML: (dejo un ejemplo con imagenes estaticas)

@extends('layouts.app')

@section('content')
<script src="{{ asset('js/home-scroll-controllers.js') }}" defer></script>
<script src="{{ asset('js/add-cart.js') }}" defer></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-xl-12">
            @if(session('message'))
            {{session('message')}}
            @endif
            <br/>
            <h1>Novedades</h1>
            <div id='cards'>
                @foreach($products_limit as $product)
                <div id="card-{{$product->id}}" class="card" onmouseenter="mouseEnterMethod('{{$product->id}}')" onmouseleave="mouseLeaveMethod('{{$product->id}}')">
                    <img id="image-{{$product->id}}" class="d-block img-fluid" src="https://i.pinimg.com/736x/c3/8f/c7/c38fc74a67cf024cc0e07bef37c9baa5.jpg">

                    <h2>asdfg</h2>
                    <span>44€</span>
                    <a  class="addCart" id="addCart-{{$product->id}}">Añadir a la cesta</a>
                </div>


                @endforeach

            </div>
            <img id="slideLeft" src='{{ asset('img/previous.png') }}'/>
            <img id="slideRight" src='{{ asset('img/next.png') }}'/>
        </div>
    </div>
</div>
@endsection

CSS:

#cards{
    width: 85%;
    display: flex;
    flex-wrap:nowrap;
    overflow-x:  auto;
    overflow-y:  hidden;
    margin:0px auto;
    background: red;
    height: 320px;
}

#cards {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

#cards::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}


#cards .card{
    width: 22.9%;
    flex: 0 0 auto;
    box-shadow: 0px 0px 3px#444;
    margin: 10px;
    overflow: hidden;
}


#cards .card img{
    width: 280px;
    height: 240px;
    transition: all 300ms; 
}


#cards .card .addCart{
    opacity: 0;
    width: 85%;
    border: 2px solid #444;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background:#fff;
    color: black;
    cursor: pointer;
    text-align: center;
    height: 45px;
    line-height: 40px;
    margin-top: 15px;
    position: absolute;
    top: 86%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms;
    transition-delay: 200ms;
}

#cards .card .addCart:hover{
    text-decoration: none
}



#cards .card h2{
    font-size: 20px;
    text-align: center;
    font-weight: 300;
}

#cards .card span{
    font-size: 14px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

#slideLeft{
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    cursor: pointer;
}

#slideRight{
    position: absolute;
    top: 50%;
    right: 0;
    width: 60px;
    cursor: pointer;
}

JavaScript:

function mouseEnterMethod(id) {

    let card = document.querySelector('#card-' + id);
    let addCart = document.querySelector('#addCart-' + id);

    card.style.height = "400px";
     card.style.position = "";
    addCart.style.opacity = "1";

}


function mouseLeaveMethod(id) {

    let cards = document.querySelector('#cards');
    let card = document.querySelector('#card-' + id);
    let addCart = document.querySelector('#addCart-' + id);
    let img = document.querySelector('#image-' + id);

    addCart.style.opacity = "0";
    setTimeout(function () {
        card.style.height = "";
    }, 100);
}

Espero que me puedan ayudar!! muchas gracias por leer hasta aquí

1
  • Hola, alguien? Por favor
    – Adromicfms
    el 9 ene. 2021 a las 4:30

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.