How can I change the project thumbnail hover from a semi transparent white background on my website:
To a semi transparent black background like this:
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