1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Blog post - display meta Category over part of image?

Discussion in 'Free Divi Community Forum' started by chris r, Aug 1, 2019.

  1. chris r

    chris r Member

    Hi,

    Using the blog module, I'd like to be able to add the Category name as a small overlay over the featured image in the upper left so it looks like the attachment. "Tech Life" is the category in the image.

    I'm using the default blog view that shows the category name as text under the meta title and image, so I'm not sure how to move the category over the featured image if it's even possible?

    Thanks!
    Screen Shot 2019-08-01 at 12.07.35 PM.png
     
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
  3. chris r

    chris r Member

    It's not live yet, only in development.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    You can try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  5. IHADFT

    IHADFT New Member

    I am looking to do something similar... What would the CSS look like if you only wanted this overlay on a specific category? Using the example above, let's say I only want the posts which are categorized as "Tech Life" to display the overlay. If the post is in a different category, it simply displays no overlay.
     
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    For the CSS, replace .et_pb_post with .et_pb_post.category-YOURCATEGORY
     
  7. IHADFT

    IHADFT New Member

    Awesome! I have one other related question. I am looking for a solution similar to this with posts that contain multiple categories, but only wishing to display one of them. So, using this example above, lets say this post has been assigned the category "Tech Life" as well as "Computers". I only want it to display "Tech Life" in the overlay. Is there an alteration to the code that would allow this? I would even be open to an option that simply accomplishes overlaying a static text phrase (in this case "Tech Life") over the image when a post is in that category. That way I am not moving the meta (and don't have to worry about multiple categories), but simply triggering a text overlay when the "Tech Life" category is present in a post. Open to any suggestions that accomplish the goal in a post with multiple categories. Thank you again! Much appreciated!
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    Not sure if I'm able to help with that, but kindly share your URL first.