theonlychase
4/20/2018 - 7:25 PM

Fade Text over Product Image

Had to add an inline style at the end of the fade since it was adding display: inline itself on the product title

fade-text1
content_copyfile_download
// Fade Text on Product List Hover
jQuery("body.nextProductList div.tileContent").hover(function() {
    jQuery(this).children('body.nextProductList a.nextProdName').fadeToggle().css('display', 'block');
    jQuery(this).children('body.nextProductList div.tileContent div.nextStatus').fadeToggle();
});
fade-text2
content_copyfile_download
/* Product List Product Styles */
body.nextProductList div.tileContent {
    position: relative;
}

body.nextProductList a.nextProdName {
    position: absolute;
    top: 10px;
    padding-left: 10px;
    display: none;
    font-family: 'amalia_pronormalitalic',sans-serif;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1px;
}

body.nextProductList a.nextProdName:hover {
    text-decoration: none;
}

body.nextProductList div.tileContent div.nextStatus {
    position: absolute;
    top: 30px;
    padding-left: 10px;
    display: none;
    font-family: 'amalia_pronormalitalic',sans-serif;
    text-transform: capitalize;
    letter-spacing: 1px;
}