Zoom in effect on image

Posted in: Newspaper
Post count: 11

How to add simple zoom in effect on image like the one we have on post links?
https://blog.avmarket.rs/
Here is explained http://prntscr.com/kvdkio

Post count: 20688

Hi,

That is a hover effect specific to our big grids. It could be used for blocks if that is what you want. For example a code like this will affect most of the modules
https://www.screencast.com/t/tfYfQkGpHYRh

You can experiment with it, this is the code used
https://pastebin.com/t47gyfyu
You can also make it more precise, for specific blocks/modules if needed.

Thanks

Post count: 11

Thanks.

I have tried to insert extra class here http://prntscr.com/kvfz5l
but nothing happened. This is single image with link.
Any idea?

Post count: 20688

Don’t use class name already used by the theme. That can cause problems. Also enter them without a “.” in the composer field.

I have made an example where this customization will apply only for a block
Custom class set to block – https://www.screencast.com/t/aqF17Bb1e4gE
Code looks like this – https://www.screencast.com/t/ODViQyzmehP
Now this effect applies only for the blocks which use that class.

Post count: 11

This now expands whole img. Like there is no placeholder.
Here is video https://youtu.be/8Jrjk1azFx0

Post count: 20688

That is a single image, not a block. I thought you were referring to block modules. In the screenshot you provided it is indeed a single image, somehow I failed to see that.

This code should work for a single image (I used a class called myimage in my example)
https://www.screencast.com/t/feKpdsJc
https://pastebin.com/b2bbB43K

Post count: 11

That is it! Thanks a lot 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
The forum ‘Newspaper’ is closed to new topics and replies.