XF 2 Tip Hover effect on threads, widgets & posts

  • Our resources on BlackForums Community is CLEAN and SAFE. So you can use it for development or production. But sometime the antivirus will warn the JS code. It's no problem. So before downloading, you need to disable the antivirus tools and then enjoy!!

BlackForums

Legendary
Staff member
Power Admin
Moderator
Jan 6, 2020
112
12
21
Add this code to your extra.less template.
CSS:
// Forum, Sub-Forum and What's new
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread, .block-container .message-inner {
    transition: all 0.4s ease-in;
    &:hover{
        transform: scale(1.015);
    }
}

// Widgets
.block-body .block-row  {
    transition: all 0.4s ease-in;
    &:hover{
        transform: scale(1.05);
    }
}
// Category nodes
.block-container .block-header  {
    transition: all 0.4s ease-in;
    &:hover{
        transform: scale(1.02, 1.05);
    }
}
The transition changes the speed of the effect.(Lower is faster)
The scale changes the amount it jumps forward.(Lower is less jump)

This will work on all threads even in the what's new section.(And now also the widgets & posts)
If it isn't working somewhere just let me know and i will see if i can find the classes for it.

Edit:
I've just noticed that since i've added profile post from what's new it also has the effect on all forum posts.
I like it myself but if you don't, just let me know and i will search for the seperate classes for each of them.

Just for information there are many effects you could create if you would read up on the transition and transform property's.
This is just changing the scale but you can also rotate in multiple angles, scale different heights and widths or create a 3d effect to name a few.

Update:
Added the widgets aswell.
Update2:
Added latest profile post in what's new.
Update3:
Separated the widgets from the threads as they scale differently.
And changed the scaling based on the default theme.(You should/could still edit to your own liking and theme.)
Update4:
Added the category nodes.
Update5:
Code cleaned up and less cluttered thanks to @Ehren
Update6:
XF2.1 works without any changes
Zoomonhover.gif
widget effect.gif