Resource icon

xF2 Guides Hover effect on threads

I did not create the code myself but i did change/update the classes to my liking and XF2.

Add this code to your extra.less template.
Code:
/*Forum, Sub-Forum & What's new*/
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread, .block-container .message-inner {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-body .node--forum:hover, .structItemContainer .structItem--thread:hover, .structItemContainer-group .structItem--thread:hover, .block-container .message-inner:hover {
-moz-transform: scale(1.015);
-webkit-transform: scale(1.015);
-o-transform: scale(1.015);
-ms-transform: scale(1.015);
transform: scale(1.015);
}
/*Widgets*/
.block-body .block-row  {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-body .block-row:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
/*Categorynodes*/
.block-container .block-header  {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-container .block-header:hover {
-moz-transform: scale(1.02, 1.05);
-webkit-transform: scale(1.02, 1.05);
-o-transform: scale(1.02, 1.05);
-ms-transform: scale(1.02, 1.05);
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.
zoomonhover-gif.178401
widget-effect-gif.178400
I did not create the code myself but i did change/update the classes to my liking and XF2.

Add this code to your extra.less template.
Code:
/*Forum, Sub-Forum & What's new*/
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread, .block-container .message-inner {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-body .node--forum:hover, .structItemContainer .structItem--thread:hover, .structItemContainer-group .structItem--thread:hover, .block-container .message-inner:hover {
-moz-transform: scale(1.015);
-webkit-transform: scale(1.015);
-o-transform: scale(1.015);
-ms-transform: scale(1.015);
transform: scale(1.015);
}
/*Widgets*/
.block-body .block-row  {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.block-body .block-row:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(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 give the search for the seperate classes for those.

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 still edit to your own liking and theme.)
zoomonhover-gif.178340

widget-effect-gif.178339
731Threads
2,287Messages
63,809Members
aaryavanshhoraLatest member
Back