These are individual elements that cannot be individually be targeted. In order to move all thee parts as a unit, we first need to combine them into one element. Pretty cool, huh!
Sources:
- Blog: https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/
- Projects (different code): https://www.peeayecreative.com/how-to-move-the-divi-portfolio-title-and-meta-text-over-the-image/
How to
- Add this class to the blog module: pa-blog
- Add this script to a code module on the page or in Divi » integrations » head
- You can now target the new pa-blog-text to give it a background or move it over the image.
// START Combine Divi blog moduletitle, text, meta
<script>
(function($) {
$(document).ready(function() {
$(".pa-blog .et_pb_post").each(function() {
$(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
});
//Do the same for ajax
$(document).bind('ready ajaxComplete', function() {
$(".pa-blog .et_pb_post").each(function() {
$(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
});
});
});
})(jQuery);
</script>
// END Combine Divi blog moduletitle, text, metaCode language: HTML, XML (xml)
Move over image
/* START move wrapped title, meta, and text up over the image */
.pa-blog-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 30px;
z-index: 1;
}
.et_pb_blog_grid article {
position: relative;
}
.et_pb_blog_grid .et_pb_post {
padding: 0px;
}
.et_pb_image_container {
margin: 0;
}
.et_pb_post .entry-featured-image-url {
margin: 0;
}
.et_pb_blog_grid .entry-featured-image-url::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* END move wrapped title, meta, and text up over the image */Code language: CSS (css)