Image CSS customization

Hi Adrian,

We can change the value of translateY(); to a negative value so it goes up instead of down.

Try this:

.dynamic-featured-image:hover {
-webkit-transform: translatey(5px);
transform: translatey(-5px);
}

It's better but is there any CSS that makes a zoom-in effect like the provided example?

Thank you.

You'll have to re-arrange the Block element - Content template a bit to achieve the exact same result.

The image block should be wrapped by its own container block. We then set its container to overflow hidden.

Can you do this and add the image's container block with post-image-wrapper class?

You can then do something like this for the "zoom"

.dynamic-featured-image:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.dynamic-featured-image .post-image-wrapper {
overflow: hidden;
}

Almost there.

The only issue left is that the image is overflowing (I added the class and the new code).

Updated the page in private information.

The only issue left is that the image is overflowing (I added the class and the new code).

Ah right let's correct the CSS a bit:

Instead of this:

.dynamic-featured-image .post-image-wrapper {
overflow: hidden;
}

Add this instead:

.dynamic-content-template .gb-container.post-image-wrapper {
    overflow: hidden;
}

That worked.

1 more thing please. Can we make the transformation smoother instead of instant?

Thanks.

Set the proper transition.

.dynamic-featured-image {
transition: all .5s ease-in-out;
}

This is perfect. Thank you.

No problem. Glad you got it sorted. :)