Archived topic

Show Archive Post Titles on hover

5 replies · Started by Daniele on February 21, 2023

Viewing posts 1–6 of 6

February 21, 2023 at 1:58 am #2540871

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

February 21, 2023 at 2:40 am #2540917

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;
}

February 21, 2023 at 3:46 am #2540994

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?

February 21, 2023 at 5:31 am #2541095

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;
}

February 21, 2023 at 6:00 am #2541136

Thanks David,
worked flawessy!

February 21, 2023 at 6:58 am #2541193

Glad to hear that !

This archived topic is closed to new replies.

Start building better websites today.