Hover effect on threads, widgets & posts

[MojoW]

MojoW submitted a new resource:

Hover effect on threads - Threads enlarge on hover

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.

.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread {
-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...

Read more about this resource...

 

[MojoW]

MojoW updated Hover effect on threads, widgets & posts with a new update entry:

Hover Effect On Threads, Widgets & Posts

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.

/*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...

Read the rest of this update entry...

 

[MojoW]

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.

 

[MojoW]

MojoW updated Hover effect on threads, widgets & posts with a new update entry:

Hover effect on threads, widgets & posts

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.

/*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...

Read the rest of this update entry...

 

[MojoW]

If you don't like that all users get the effect when you hover over one in the members online widget.
You can disable the effect on the members online widget by changing this:

.block-body .block-row
.block-body .block-row:hover

To:

.block-body .contentRow
.block-body .contentRow:hover

 

[MojoW]

The steam addon wasn't working with the effect for me so i added those classes aswell.
This should work on more addons that have their own forum tab.

.structItemContainer .js-inlineModContainer

 

[Ehren]

This is a little easier to maintain and does the same thing. Prefixes are no longer required

// 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);
    }
}

 

[MojoW]

Thanks @Ehren.
That does clean it up alot.

So without the prefixes older browsers will still work as that was the only reason i added all them?

 

[Ehren]

So without the prefixes older browsers will still work as that was the only reason i added all them?

The prefixes add support for extremely old browsers from pre-2012. Every major browser since 2013 has supported unprefixed css transitions, so prefixes are no longer necessary. I never use them in my code, and it's only beneficial to 0.06% of visitors on average.

 

[MojoW]

The prefixes add support for extremely old browsers from pre-2012. Every major browser since 2013 has supported unprefixed css transitions, so prefixes are no longer necessary. I never use them in my code, and it's only beneficial to 0.06% of visitors on average.

Thanks for the info.

Yeah i dont use them either ... as a matter infact i block users with older browsers on my site.

 

[MojoW]

These classes are for XenRio 2.

.rio-grid .rio-tiled-block

And if any of you want a different effect or want the effect on something else just let me know.

 

[MojoW]

These are the classes for the each member block in the members tab.

.memberOverviewBlock-list .contentRow

 

[GinaKaye]

Very nice! Would this work with Bob's Showcase addon to display the showcase category descriptions?