• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Node magic

#2
Used something similar couple years back, can not remember who I got the code from to give credit...but try adding this to your EXTRA.css

Code:
/* discussionList Hover effect */
.discussionListItem {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.discussionListItem:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform:  scale(1.05); -moz-transform:  scale(1.05); -o-transform:  scale(1.05); -ms-transform:  scale(1.05);transform: scale(1.05);
}
 
#4
But this work well

PHP:
/* discussionList Hover effect */
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform:  scale(1.05); -moz-transform:  scale(1.05); -o-transform:  scale(1.05); -ms-transform:  scale(1.05);transform: scale(1.05);
}
Thanx !!! :)
 
#5
And this is with color shange:

PHP:
/* discussionList Hover effect */
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform:  scale(1.05); -moz-transform:  scale(1.05); -o-transform:  scale(1.05); -ms-transform:  scale(1.05);transform: scale(1.05);
}
.nodeList .nodeInfo:hover, .discussionList .discussionListItem:hover, .discussionListItem:hover .posterAvatar, .discussionListItem:hover .stats
{
    background-color: black;
}
I hope that this will help to the folks :)