Archived topic
Heading over blog
1 reply · Started by Bart on December 1, 2020
Viewing posts 1–2 of 2
So i Created a 9 blog post on my main page however I can only add title underneath but I would like to have it over the cover photo. I used WP SHOW POST to create blog grid but i would love to have title over the image no under ...
Hi there,
try this CSS:
#wpsp-13152 .wp-show-posts-inner {
position: relative;
}
#wpsp-13152 .wp-show-posts-entry-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: rgba(0,0,0,0); /* Set image overlay */
transition: background-color 0.2s ease-in;
}
#wpsp-13152 .wp-show-posts-inner:hover .wp-show-posts-entry-header {
background-color: rgba(0,0,0,0.45); /* Set image overlay hover */
}
#wpsp-13152 .wp-show-posts-image {
margin-bottom: 0;
}
#wpsp-13152 .wp-show-posts-image img {
vertical-align: bottom;
}
#wpsp-13152 .wp-show-posts-entry-header a {
color: #fff; /* set title text */
}It applies specifically to the WPSP Grid on your home page which has the ID of 13152
I added an overlay to the image as well. Commented above where you change the overlay and text colors.
This archived topic is closed to new replies.
