Squarespace Blog Zusammenfassung Thumbnails

Question

Ich versuche, diese tutorial from Muno Space anpassen, um die Miniaturansicht img Hintergrund wie die Standardzustand, mit einem farbigen Hintergrund auf Hover.

Ich kann nicht herausfinden, welcher Teil des Javascript zu ändern, um dies zu tun, bitte helfen! Ich habe alles versucht, was mir einfällt, aber mein Verständnis von JS ist sehr rudimentär. Die Antwort ist wahrscheinlich offensichtlich für jeden, der JS wirklich kennt.

Here is my live build, und hier ist das Skript in Frage:

<script type="text/javascript"> 
    $.fn.preload = function() { 
    this.each(function(){ 
     $("<img/>")[0].src = this; 
    }); 
    }; 
    $(document).ready(function() { 
    var imageArray = $('.sqs-block-summary-v2 .summary-item').map(function() { 
     return $(this).find('.summary-thumbnail-container img').data('src'); 
    }); 
    $(imageArray).preload(); 
    $('.sqs-block-summary-v2 .summary-item').hover(function() { 
     var image = $(this).find('.summary-thumbnail-container img').data('src'); 
     $(this).css({ 
     'background-image': 'url(' + image + ')' 
     }); 
    }, function() { 
     $(this).css({ 
     'background-image': 'none' 
     }); 
    }); 
    $('.sqs-block-summary-v2 .summary-item').click(function() { 
     window.location.replace($(this).find('.summary-read-more-link').attr('href')); 
    }); 
    }); 

Und hier ist die entsprechende CSS:

.sqs-block-summary-v2 .summary-item { 
 
    border: 0px solid #d0d5d8; 
 
    background: #F2F1EE; 
 
    padding: 2em 2em; 
 
    height: 18em; 
 
    cursor: pointer; 
 
    background-size: cover; 
 
transition: background .05s ease-in-out; 
 
    } 
 
    .sqs-block-summary-v2 .summary-thumbnail-container { 
 
    display: none; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover { 
 
    background-color: rgba(193, 165, 132, 0.5); 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover:before { 
 
    content: ' '; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #101010; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0.4; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-content, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-metadata-item, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-title a, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { 
 
    color: white; 
 
    opacity: 1; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { 
 
    border-bottom-color: white; 
 
    } 
 
    .sqs-block-summary-v2 .summary-content { /* date */ 
 
    text-align: left; 
 
    height: 100%; 
 
    position: relative; 
 
    } 
 
    .sqs-block-summary-v2 .summary-metadata-item { /* date */ 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: ; 
 
    font-family: "Belleza"; 
 
    color: #545048; 
 
    } 
 
.sqs-block-summary-v2 .summary-title a, .sqs-block-summary-v2 .summary-heading a, .sqs-block-summary-v2 .summary-title a:link, .sqs-block-summary-v2 .summary-heading a:link, .sqs-block-summary-v2 .summary-title a:visited, .sqs-block-summary-v2 .summary-heading a:visited { /* title */ 
 
    color: #545048; 
 
} 
 
    .sqs-block-summary-v2 .summary-title { /* title */ 
 
    font-size: 24px; 
 
    font-family: "PT serif"; 
 
    } 
 
    .sqs-block-summary-v2 .summary-read-more-link:after { 
 
    content: 'Read More'; 
 
    font-weight: 400; 
 
    color: #918B7C; 
 
    font-size: 15px; 
 
    border-bottom: solid 1px #8a959e; 
 
    letter-spacing: 1px; 
 
    padding-bottom: 2px; 
 
    font-family: "PT serif"; 
 
    } 
 
.sqs-block-summary-v2 .summary-read-more-link::after { 
 
    border-bottom: 1px solid #DCD8CF; 
 
} 
 
    .sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link { 
 
    position: absolute; 
 
    bottom: 0; 
 
    }

Answer 1

Diese die Hover umkehren sollte Muster. Sie sollten es auch so ändern, dass der Hintergrund im Hintergrund erscheint.