Archived topic
Read Theme - image color overlay
3 replies · Started by Fraser on August 16, 2021
How do you get the coloured effect that appears on top of the Read Theme post like this
https://gpsites.co/read/read-post-6/
to appear on the category post image; here
https://gpsites.co/read/category/technology/
I tried to change the div class to image-post img from gb-container to no avail
.gb-container-8a7b9d69 {
background-color: #e0314f;
position: relative;
overflow: hidden;
}
.gb-container-8a7b9d69:before {
content: "";
background-image: url(https://gpsites.co/read/wp-content/uploads/sites/65/press-photo-1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: inherit;
opacity: 0.3;
}
Hi there,
the Page Hero on the single post uses a Block Element which displays the Featured image as a background with 0.3 opacity, that is overlayed on top of the containers background color. For the post archives, you would need to do something like this:
.post-image-above-header .inside-article div.post-image {
background-color: #e0314f;
}
.post-image-above-header .inside-article div.post-image img {
vertical-align: bottom;
opacity: 0.3;
}thanks David, I used cut it down to the following based on your css which seems to work; cheers.
.post-image {
background-color: #e0314f;
}
.post-image img {
vertical-align: bottom;
opacity: 0.3;
}
Glad to hear that.
