JUST REPLACE BLURRY IMAGE
if ($('.et_pb_blog_grid').length) {
$('.et_pb_blog_grid article').each(function() {
$('.et_pb_image_container', this).append($('.entry-title', this))
$('img', this).attr('src', $('img', this).attr('src').replace('-400x250', '')).attr('srcset', '');
})
$(document).bind("ajaxComplete", function() {
$('.et_pb_blog_grid article').each(function() {
$('.et_pb_image_container', this).append($('.entry-title', this))
$('img', this).attr('src', $('img', this).attr('src').replace('-400x250', '')).attr('srcset', '');
})
})
}
JS
/*------------------------------------------------*/
/* BLOG GRID IMAGE BACKGROUND --*/
/*------------------------------------------------*/
function imagesArticleBg() {
$('#ligne-blog article').each(function () {
var imgUrl = $('img', this).attr("src");
console.log(imgUrl);
$(this).css("background", "linear-gradient( rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(" + imgUrl + ")");
$(this).hover(function () {
$(this).css("background", "linear-gradient( rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(" + imgUrl + ")");
})
$(this).mouseleave(function () {
$(this).css("background", "linear-gradient( rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(" + imgUrl + ")");
})
});
}
imagesArticleBg(); //initialisation
/* J'active aussi ma function apres le changement de page AJAX*/
$('#ligne-blog').bind("ajaxSend", function () {
console.log('loadibn')
}).bind("ajaxComplete", function () {
imagesArticleBg();
console.log('loaded')
});
CSS
#ligne-blog .et_pb_column {
display:flex;
justify-content:center;
}
#ligne-blog article img {
display: none;
}
#ligne-blog article {
background-size: cover !important;
background-position: center !important;
color: white !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
border: none !important;
text-align: left;
padding-top: 15% !important;
padding-bottom: 15% !important;
}