Adding image hover to post images

Hi there,

I’m not seeing the CSS being added.

Can you clear and disable the caching plugin first?

It would be nice if you can enable us to use right click during debugging as well.

Let me know ??

Hi Leo
1. The CSS has been added
`.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
max-width: 100%;

-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

2. Right-click has been enabled
3. Cache has been cleared as well

Any chance you can disable the caching plugin for now?

I’m just not seeing this block of code showing in the source:

.post-image:hover img {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

I just checked the code on my install and it works.

Also is this something that you’ve added? If so can you temporarily remove that as well?

@media (min-width: 769px) {
    .inside-article .post-image a img {
        height: 232px;
        object-fit: cover;
        object-position: center;
    }
}

Hi Leo
I have attached the screenshots (from Simple CSS) for your reference. Please note that the image sizes in the archive page have all got misaligned. I need the image sizes to be aligned and with hover effect.

Yes, the CSS code is working fine on another website:
https://kriyayogasandesh.com

Screenshots:
https://prnt.sc/nz4a4z
https://prnt.sc/nz4aae

Hi there,

It seems to be this element which is causing the issue:

<a class="post-block-link" href="https://your-website.com/practical-words-of-wisdom/"></a>

How are you adding this link at the moment?

Let me know ??

Hi Tom

I was basically trying to make the whole post column clickable by using this code:

whole post div clickable in blog / archives - https://generatepress.com/
forums/topic/how-to-make-whole-post-div-clickable-in-blog-archives/
.inside-article {
	position: relative;
}
a.post-block-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}

I have disabled the CSS and everything is back to normal with hover effect. Thank you so much for the fact-finding and extended support for aged non-techies like myself.

Lesson Learnt: Never blindly copy paste any code. Ask an EXPERT!:)

Warmest Regards
BM

No problem! I find javascript to be a better solution for that kind of thing: https://generatepress.com/forums/topic/making-blog-post-container-clickable/#post-602864