Archived topic

Make entire div a link on blog archive page

5 replies · Started by Miloš on January 13, 2022

Viewing posts 1–6 of 6

January 13, 2022 at 3:21 am #2078873

Hi guys, I would to make entire div that represents a single post on blog page clickable.
Right now the setup is such that only Post title and post featured image are clickable, how would I go about making the entire div a link?

Here's a picture that better showcases the ask: https://www.screencast.com/t/HHCnzTjB0Jx

Thanks a lot!

January 13, 2022 at 4:47 am #2078955

Hi there,

can you share a link to your site so i check the markup and provide a solution.

January 13, 2022 at 5:02 am #2078975

Thanks for looking into it David! I shared link privately

January 13, 2022 at 5:19 am #2078997

OK so this CSS to make all the card clickable:

.generate-columns .inside-article {
    position: relative;
}

.generate-columns .entry-title a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.generate-columns .post-image {
    position: relative;
    z-index: 1;
}

And then to make the image zoom effect when any part of the card is hovered, you need to replace this:

.post-image:hover img {
    transition: 300ms;
    transform: scale(1.1);
}

with:

.generate-columns .inside-article:hover .post-image img {
    transition: 300ms;
    transform: scale(1.1);
}

January 13, 2022 at 5:30 am #2079007

David, this exactly what I was looking for. Thank you so much for impressive support and an amazing product.

January 13, 2022 at 5:40 am #2079011

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.