Join the cypher
Login
Divi – Adding a hover overlay to the blog module

Divi – Adding a hover overlay to the blog module

  • by PK
  • on 2019-05-20
  • in Divi

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;
  }
}

[sc name=”customcss”]

 

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;
}

 

[sc name=”learn css”]

[sc name=”responsive-ad”]

 

 

Photo by Jure Tufekcic on Unsplash

Get Breakdance

Breakdance is, in my opinion, the best page/site builder on the market, which is why all my tutorials use Breakdance. It's also why I have an affiliate link. You don't pay extra, but I get a little commission, so it helps support the site. Thanks!
get breakdance

Get ACF Pro

Another essential plugin for site building. This isn't an affiliate link, it's just for convenience.
get ACF pro

Get WP Codebox Pro

If you'd like an easier to use, and more advanced code management plugin (instead of just editing and making files yourself) then WP codebox pro is for you. Adding php, js, and even SCSS. Pretty nice! Affiliate link below.
get WPcodebox pro

Blank Plugin

Sort of blank. It's made to be easy to use with the tutorials. Download and edit any way you see fit.
Icon

Almost Inevitable Blank Plugin File

1 file(s) 7.22 KB
Download

  1. 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

  2. Thanks PK! Just what I was looking for 🙂

    • Awesome! always happy to help!

  3. 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.

    • Hi Thomas, thank you for the kind words. I suppose you could add icons and stuff, but from you wrote it sounds more like just a block that has this type of hover behavior. In that case, I made a different tutorial that looks similar using a blurb module here: http://almostinevitable.com/divi-adding-hover-overlay-to-the-blurb-module/

      With a blurb module, you can just add what you want in the blurb content field. Hope that helps. Thanks

  4. 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?

  5. 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

  6. After Hover applied only the Post title is clickable not whole hover effect.is any CSS modification to solve this..

    • Hi Ajay, yes, this is possible. You can stretch out the anchor tag area to fit the hover area.

      I don’t have any Divi installation (I should, sorry) to test on at the moment. If you send me a URL I can look at, I’ll write up the extra code for you. feel free to email me at my name @ this domain. Thanks

        • Oh cool, thanks!

          here’s the extra code you need.
          .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
          width: calc(100% – 2rem);
          height: calc(100% – 2rem);
          text-align: left !important; /* need to override Divi’s settings */
          }
          .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title a {
          display: block;
          width: 100%;
          height: 100%;
          }

  7. Is there any why we can add 4 post in each row code with your CSS setting.

  8. Had trouble defining the hit area to be the entire block. Other than that, very easy to follow, thanks!

    • Thank you for the kind words!

  9. Dear PK,
    first thanks for the great tutorial, it works like a charm 🙂

    Could you maybe give me a hint on what to do if the featured images I am using have different formats? Is there a way they all adapt to one size?

Leave a Reply

Your email address will not be published. Required fields are marked *

New tutorials

Auto-updating Year in Footer
Designing Beyond the Brief
Disable Gutenberg Editor on some ACF pages
ACF flexible content fields in Breakdance 2.4

Got a question? ask!

If you have any question about the content on this page, feel free to send me an email by clicking the button below.

newsletter? sign up!

Sign up to the newsletter for updates on tutorials, news, and offers.

Join the cypher!

An awesome membership program for Breakdance Builder users coupled with an inclusive, friendly community.
Learn more
I'm in! Sign me up now!

Got a question?

If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!