0

How can I change the project thumbnail hover from a semi transparent white background on my website:

http://www.lauradawaf.co.uk/

To a semi transparent black background like this:

http://madebysix.com/

notso.animations.js

$(".project_thumb").each(function() {  // INDEX: fade thumb boxes in sequentially
    $(this).delay(db).fadeIn(500);
    db += 150;  
});

$(".project_thumb img.project_thumb_img_hover").css({'opacity': '0.3'}); // INDEX: force opacity on project_thumb_img_hover  
$(".project .meta, .project_text").delay(500).fadeIn(800); // SINGLE: fade project text in 

$(function(){  // INDEX: thumbnail hover & delay 
    var config = {    
         sensitivity: 7, // minumum mouse movement before doOver is called    
         interval: 75,  // delay before doOver    
         over: doOver,   // onMouseOver function    '
         timeout: 300,   // delay before doOut
         out: doOut    // onMouseOut function      
    };
    function doOver() {
         $(this).find("img.project_thumb_img").fadeTo(250, 0);
         $(this).find("img.project_thumb_img_hover").fadeIn(250);
         $(this).find(".meta").delay(150).fadeTo(250, 1);
    }
    function doOut() {
         $(this).find(".meta").fadeTo(250, 0);
         $(this).find("img.project_thumb_img").delay(150).fadeTo(250, 1);
         $(this).find("img.project_thumb_img_hover").delay(150).fadeOut(250);
    }
    $(".project_thumb").hoverIntent(config);
});

$('#project_thumbnails') // INDEX: masonry layout
    .isotope({
        masonry: {
            columnWidth: 6
        },
        animationEngine: 'jquery',
        animationOptions: {
            easing: 'easeOutQuint',
            queue: false,
            duration: 1000
        }
    });
}); // close doc.ready
4

1 回答 1

1

请在您的 CSS 文件中添加以下行

.project_thumb_large, .project_thumb_small { 背景:#333;}

于 2013-07-29T09:26:13.490 回答