XF 2.2 How to add "floating effect" to node blocks?

gogo

Well-known member
For example, I would like change the following blocks:

1599196426824.png

to something like this:

1599196444732.png

Note that it's not a zoom in effect, contents in the blocks do not move or zoom. It's only some shadows are added to the blocks to make it look like raising from background.

I can do the grids with the help of an add-on. But how do I make the mouse-over effect like that? That is the block looks floating a bit whenever I put mouse over it.

The website is: https://www.neogaf.com/
 
Last edited:
Maybe you can apply box-shadow settings to the blocks with something like that... Adjust the settings of the box-shadow as desired

Less:
.block {
    box-shadow: 1px 1px 5px #555;
}
.block:hover {
    box-shadow: 1px 1px 12px #555;
}
 
Top Bottom