How to Add a Hover Color to Featured Images on Archive Pages

  • I want to know how can I add a Hover to the featured images on Archive Pages.

    The title hover color can be changed from Appearance>Customize>Colors>Content>Archive Content Title

    But I need to add hover to the images also.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @ehsanhayati,

    You can try adding a CSS like this:

    .post-image:hover::after {
    content: "";
    background-color: #ff000033;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.post-image{
    position: relative;
}
    Thread Starter ehsanhayati

    (@ehsanhayati)

    The CSS did add a hover color to the featured images of Archive pages, but the images aren’t clickable anymore. I mean it removed the link to the post from the featured images.

    Can you please tell me how to fix it and also how to change the color from this css?

    Hi there,

    try this instead:

    .post-image:hover::after {
    content: "";
    background-color: #ff000033;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.post-image{
    position: relative;
}

    Note the change is the addition of the pointer-events: none; property

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Add a Hover Color to Featured Images on Archive Pages’ is closed to new replies.