- This topic has 5 replies, 3 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hello,
I’m trying to achieve an effect like this: https://www.sashaonyshchenko.com/
on my custom post archive page: https://dev.danphotostudio.com/projects/Using only CSS I moved the post title on the image positioning it absolutely and made an hovering effect.
This is the code used:.type-projects .entry-header { position: absolute; top: 40%; padding: 30px; } .type-projects .inside-article img:hover { opacity: 0.2; } .type-projects .entry-title a { opacity: 1; pointer-events: none; }The issue I have is that when hovering the title I lose the opacity effect.
Is there a better way to achieve it?thank you
Customer Support
Hi Daniele,
Try this code instead:
.type-projects .entry-header { position: absolute; top: 40%; padding: 30px; z-index: 10000; } .type-projects .inside-article{ position: relative; } .type-projects .inside-article:hover .post-image::after { content: ""; position: absolute; left:0; top:0; height:100%; width: 100%; background-color: #00000044; } .type-projects .entry-title a { opacity: 1; pointer-events: none; }Thanks Fernando!
But I have an issue now, the featured image is not clickable: https://dev.danphotostudio.com/projects/
I can only click the title, and that is not the best for the user experience…
is there another way..or I have to build a custom template for this archive?Customer Support
Hi there,
try this CSS instead:
.generate-columns-container .type-projects .inside-article { position: relative; } .generate-columns-container .type-projects .entry-title a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; padding: 30px; background-color: #1b1b1bcc; opacity: 0; transition: opacity 0.3s ease-in; } .generate-columns-container .type-projects .entry-title a:hover { opacity: 1; }Thanks David,
worked flawessy!Glad to hear that !
- You must be logged in to reply to this topic.
