[Resolved] Show Archive Post Titles on hover

[Daniele]

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

[Fernando]

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

[Daniele]

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?

[David]

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

[Daniele]

Thanks David,
worked flawessy!

[David]

Glad to hear that !

[Author]

Posts