Divi – Adding a hover overlay to the blog module

I’m actually pretty happy with this one.

The main problem with making this in Divi is the HTML structure.

Usually, if you want to superimpose a layer on top of an image, you’re going to need two distinct divs and give them absolute positioning.

But the Divi blog module doesn’t have this. All the elements are just child elements on the same level.

A few different options to overcome this:

– Make a new blog module -> just for that? whew..
– Edit the parent theme blog module -> You’ll have to do it for every update, so probably not a good idea.
– Use jquery to add some extra HTML -> Not the best tool for the problem. Plus, it can get hard to maintain.

So.. here’s a pure CSS method. woohoo!

Preview

Here’s what we’re going for:

Or just watch the video below:

 

The Video

 

What you need to do

Add a blog module.

Make sure you have the featured image ON.

 

Layout – Fullwidth

 

Custom Class: blog-hover

 

The CSS

And then add this CSS

.et_pb_posts.blog-hover .et_pb_ajax_pagination_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
  width: calc(33% - .5rem);
  margin-right: .95rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(3n+3) {
  margin-right: 0;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:after {
  content: "";
  position: absolute;
  visibility: visible;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* this is the color of the overlay */
  z-index: 1;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-featured-image-url {
  margin-bottom: 0;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-title {
  position: absolute;
  color: white; /* this is the color of the title text. You can take this out to modify it in the module settings */
  top: 1rem;
  left: 1.5rem;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-content {
  display: none;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover:after {
  width: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
  top: 1rem;
  left: 1rem;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta {
  top: 3rem;
  left: 1rem;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta a {
  color: white; /* this is the color of the post meta. You can take this out to modify it in the module settings */
}
@media all and (max-width: 1024px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover {
    margin-bottom: 2rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover:after {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
    position: relative;
    top: 1rem;
    left: 0;
    opacity: 1;
    color: black; /* this is the color of the title on mobile. You can take this out to modify it in the module settings */
    margin-bottom: 1rem;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta {
    position: relative;
    top: auto;
    left: 0;
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta a {
    color: black; /* this is the color of the post meta on mobile. You can take this out to modify it in the module settings */
  }
}
@media all and (max-width: 1024px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    margin-bottom: 2rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:after {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-title {
    position: relative;
    top: 1rem;
    left: 0;
    opacity: 1;
    color: black;
    margin-bottom: 1rem;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta {
    position: relative;
    top: auto;
    left: 0;
    opacity: 1;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta a {
    color: black;
  }
}
@media all and (max-width: 980px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    width: calc(50% - 12.5px);
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(3n+2) {
    margin-right: 1rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(odd) {
    margin-right: 1rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(even) {
    margin-right: 0;
  }
}
@media all and (max-width: 479px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    width: 100%;
    margin-right: 0 !important;
  }
}

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

And you’re DONE!

 

Note: if you want to hide the post meta and only use the title in the center of the block, add display: none; to all the post-meta rules and change the entry-title positioning like this:

.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi
To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

Photo by Jure Tufekcic on Unsplash

10 Comments

Hi there, I’m not a developer but I do try with my Divi themed website. I am currently working on a new Divi Child Theme. While under construction my website is down to a very basic Homepage Blog using Content Views. I want to start using the Divi Blog Module.

I have created a Blog Module page and added your CSS to enable an overlay with title in the centre. It all works perfectly except for 2 things:

1. The overlay drops below the post featured image instead of just covering it. For some reason when I made the blog module Full width instead of Grid all the featured images display as different sizes.
2. I followed instructions to remove meta data and just have the post Title in centre of overlay but clearly have done something wrong. Can I email you the page I am working on? The overlay is fantastic. If you are happy to take a look could I email you the page I am working on.

Thanks, Isla

HI PK, your awsome! My Customer wants additional to the title the excerpt and a icon (instead of read more or a button with 3 arrows) centered. How could i achieve this one? Thx for your help.

Thanks so much for sharing. I’m new to DIvi / CSS and am trying to get my blog up and running. However, I’m getting stuck on a part of the CSS. When I add the code. It seems to appear when I go to the site but it does not show up at all in the Visual Builder. It typically wouldn’t be an issue, but the blog post isn’t appearing in the center of the page and it’s hard for me to figure out what’s going on when I can’t see it in visual builder.

Do you have any idea why that is?

I seem to have followed all the steps, downloaded the plugin, copied the CSS into the field etc, and activated the plugin and CSS, but on the page nothing has visually changed? Am I forgetting an obvious step or have I not used Custom CSS properly?

Hi Alex, I think it could depend on how the blog archive section is built. Could you send through a URL via contact form (link in footer) so I can have a look?

Thanks

Leave a Reply