Carousel + Lazy Load + lightbox

Tuiles produits avec hover images produit + lazy loading + picture responsive

 CSS / Javascript
<script>
    (function () {
        $(document).ready( () => {
            if(window.matchMedia('(any-hover:hover)').matches) {
                $('.product-view').each( function() {
                    let this_ = $(this);
                    this_.on({
                        mouseover: () => {
                            this_.toggleClass('product-hover');
                        },
                        mouseout: () => {
                            this_.toggleClass('product-hover');
                        }
                    })
                });
            }
        })
    })()
</script>
<style>
    .outer-line.extend-click.product-view {
        /* surcharge des blocs outer-line extend-click */
        padding: 0.25rem;
    }
    
    @media (any-hover: none) {
        .product-view figure:first-child {
            display: none;
        }
    }
    
    @media (any-hover: hover) {
    
        .product-view figure {
            -webkit-transition: opacity .2s ease;
            -moz-transition: opacity .2s ease;
            -ms-transition: opacity .2s ease;
            transition: opacity .2s ease;
        }
        
        .product-view.product-hover, .product-view.product-hover a {
            text-decoration: none !important;
            color: var(--green) !important;
        }
        
        .product-view.product-hover figure:first-child {
            opacity: 1;
        }
        
        .product-view figure:first-child, .product-view.product-hover figure:last-child {
            opacity: 0;
        }
    }
</style>
pas de page précédentepage suivante
à partir de 49 €
Eu aliquam posuere non
à partir de 39 €
Varius vitae mauris
à partir de 194 €
Magna non orci
à partir de 188 €
Pharetra pellentesque euismod in
à partir de 105 €
Elementum augue dui sed gravida
à partir de 29 €
Vestibulum id ligula cras nec
2020-10-21