Recent posts - image zoom/scale effect

[Pbalazs89]

Hi there,

I’m building a site here: http://www.padthai.decorolux.com/

I have an essential grid set up near the bottom of the page which has the effect that I would like to pass on to the recent posts section. I found this guide, but my results were lackluster. What am I doing wrong?

Thanks!

[Prasant]

Hello @Pbalazs89,

Thanks for asking.

Please add following CSS under Pro > Theme Options > CSS to have zoom effect on recent post images:

.x-recent-posts .x-recent-posts-img:hover {transition: all .2s ease-in-out;
-webkit-transform: scale(1.25); 
-moz-transform:scale(1.25);
-ms-transform:scale(1.25); 
-o-transform:scale(1.25); 
transform: scale(1.1);
}

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 60%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

Thanks.

[Pbalazs89]

Hi there,

Thanks! Almost perfect.
The only thing that I would like to change is that now when I hover over the image, the container grows as well and grows over the title. Is there a way to fix the images container?

Thanks!

[paul.r]

Hi,

Please add this code as well.

.x-recent-posts .x-recent-posts-content {
    position: relative;
    background-color: #fff;
    z-index: 999999;
}

Hope that helps.

[Pbalazs89]

Thanks! that worked great!

[christian]

You’re welcome.