QUERY LOOP Custom CSS: Overlay feature image on Posts Grid

  • Hi everyone!! As I’ve said, I’m using QUERY LOOP to create a posts grid. I want to overlay the title and excerpt of the post with the feature image. I know I have to write “position:absolute”, but I can’t complete the code correctly.

    Someone gave me a code, which hasn’t been helpful. I tried to find the correct code using online CSS generators, but no luck. 

    .wp-block-post-content {        position: absolute;       bottom: 0;       padding: 0 1em;       color: white;       background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgba(0 0 0 / 0.8) 100%);       text-shadow: 0 0 10px black;       }

    The thing is, I’m creating this single page category grid so that you’ll always see the most recent posts. That means that whenever I upload a new post of said category, the grid will update automatically. It should look something like this, although there is no excerpt in this example:

    View post on imgur.com

    I thought it would be easier to find the right code if I considered it as HTML, like when customizing a child theme. I was wrong!! Can someone tell me how I should proceed?

    Thanks in advance!!

    PS: Grid columns are the same width and all images are the same size.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @maryhelenmaccarthy
    For i have solution of your issue
    For example see this html and css
    HTML 

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Overlay with Text</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="image-container">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="image">
            <div class="overlay-text">Your text here</div>
        </div>
    </body>
</html>
    .image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute;
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: #000000; 
  color: #fff; 
  padding: 10px 20px; 
  font-size: 20px; 
  text-align: center;
}
    Thread Starter maryhelenmaccarthy

    (@maryhelenmaccarthy)

    I did some testing, and this is what it would look like:

    View post on imgur.com

    Excuse my ignorance on the matter, but if I understand it correctly, this code should be used individually in each post to achieve the desired effect, and I’m looking for the Advanced CSS to affect the entire Query Loop block since it is not possible to select each post in said grid to customize them.

    Thread Starter maryhelenmaccarthy

    (@maryhelenmaccarthy)

    I wanted to thank you @rohitmukati for your answer and add additional details to better express what my confusion is.

    Like I said, I’m using Query Loop. When selecting this, I chose one of the “post list” options and then transformed it into a grid. By itself, I am able to edit the size and color of the featured image, summary, and title, individually from each other, and add advanced CSS to each of those elements. However, to achieve the desired effect on all posts of overlaying the image with the headline and excerpt, I need to select the entire block. When doing it, if I only put the code that you have given me corresponding to Advanced CSS, nothing happens, so I deduce that this procedure is incorrect on my part.

    Hey @maryhelenmaccarthy I am trying to achieve the same grid layout using the same query loop. Can you please tell me how you achieved yours?

    I am trying to achieve this layout.


Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘QUERY LOOP Custom CSS: Overlay feature image on Posts Grid’ is closed to new replies.

Tags