XF 2.2 SUBMISSION : Node animation on mouse hover

BubbaLovesCheese

BubbaLovesCheese

Active member
Hi,

I created a Node animation using CSS that I would like to submit if anyone is interested.

When you hover your mouse over a node, a shadow will appear and it will expand, giving it the impression it is jump out.

This is a screen shot:

NODES.JPG


I made it by adding this CSS code to the extra.less file in the ACP.

It is specific to my theme setup, but you can adjust it to fit your theme.

On my site I have Node Spacers activated in the Node/forum list under Style properties.


CSS: 
//*****************************************************//
//* Creates shadows and scales nodes when mouse hover *//
//*****************************************************//

/* Prepare node for effects */

.template-forum_list .block-container .node {
   
    /* Remove previous box border */
    border-style: none;
   
    /* For positioning the pseudo-element */
    position: relative;
   
    /* Add shadow effect to non-hover nodes */
    box-shadow: 2px 2px 1px 0px rgba(99, 99, 99, 0.3);    /* box-shadow: x-offset y-offset blur spread rgba(r, g, b, opacity) */ 
   
    /* transition time to ease back original state (slower) */
    transition: 200ms ease;
}

/* Create the hidden pseudo shadow element */

.template-forum_list .block-container .node::before {
   
    /* Position the pseudo shadow element. */
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
   
    /* Create the box shadow at expanded size. */
    box-shadow: 0 0 8px 3px rgba(66, 66, 66, 0.7);
   
    /* Hidden by default. */
    opacity: 0;
   
    /* transition time to ease back original state (slower) */
    transition: opacity 200ms;
}

/* Show the pseudo-element on hover */

.template-forum_list .block-container .node:hover::before {
    opacity: 1;
   
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Scale up the box (node) on hover */

.template-forum_list .block-container .node:hover {
    transform: scale(1.025);
   
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Adjust Node Title underline position after scale up */

.node-title {
    text-underline-offset: 2px;
}

/* Adjust Sub-node underline position after scale up */

.node-subNodesFlat {
    text-underline-offset: 2px;
}

I am just learning code, so if anyone sees any flaws, bad practice, or something that can be improved, please let me know. Other then that, it works, so enjoy!
 
Last edited:
Sort by date Sort by votes
BubbaLovesCheese said:
Hi,

I created a Node animation using CSS that I would like to submit if anyone is interested.

When you hover your mouse over a node, a shadow will appear and it will expand, giving it the impression it is jump out.

This is a screen shot:

View attachment 247295


I made it by adding this CSS code to the extra.less file in the ACP.

It is specific to my theme setup, but you can adjust it to fit your theme.

On my site I have Node Spacers activated in the Node/forum list under Style properties.


CSS: 
//*****************************************************//
//* Creates shadows and scales nodes when mouse hover *//
//*****************************************************//

/* Prepare node for effects */

.template-forum_list .block-container .node {
  
    /* Remove previous box border */
    border-style: none;
  
    /* For positioning the pseudo-element */
    position: relative;
  
    /* Add shadow effect to non-hover nodes */
    box-shadow: 2px 2px 1px 0px rgba(99, 99, 99, 0.3);    /* box-shadow: x-offset y-offset blur spread rgba(r, g, b, opacity) */
  
    /* transition time to ease back original state (slower) */
    transition: 200ms ease;
}

/* Create the hidden pseudo shadow element */

.template-forum_list .block-container .node::before {
  
    /* Position the pseudo shadow element. */
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  
    /* Create the box shadow at expanded size. */
    box-shadow: 0 0 8px 3px rgba(66, 66, 66, 0.7);
  
    /* Hidden by default. */
    opacity: 0;
  
    /* transition time to ease back original state (slower) */
    transition: opacity 200ms;
}

/* Show the pseudo-element on hover */

.template-forum_list .block-container .node:hover::before {
    opacity: 1;
  
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Scale up the box (node) on hover */

.template-forum_list .block-container .node:hover {
    transform: scale(1.025);
  
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Adjust Node Title underline position after scale up */

.node-title {
    text-underline-offset: 2px;
}

/* Adjust Sub-node underline position after scale up */

.node-subNodesFlat {
    text-underline-offset: 2px;
}

I am just learning code, so if anyone sees any flaws, bad practice, or something that can be improved, please let me know. Other then that, it works, so enjoy!
Click to expand...
works great thanks :)
 
Upvote 0 Downvote
This works like a charm, how do I add this to my sub forum list though?

*EDIT: Found out how to do it but to get the same effect, it pushes the text description all the way to the right for some reason.
 
Last edited:
Upvote 0 Downvote
FaeWhisperer said:
This works like a charm, how do I add this to my sub forum list though?

*EDIT: Found out how to do it but to get the same effect, it pushes the text description all the way to the right for some reason.
Click to expand...

Let me know how you got it working on the sub-forums. I never thought about using there, or even tried.

FYI, I would have loved to add a clicking sound each time the mouse hovers over a new node. ;-)
 
Upvote 0 Downvote
BubbaLovesCheese said:
Let me know how you got it working on the sub-forums. I never thought about using there, or even tried.

FYI, I would have loved to add a clicking sound each time the mouse hovers over a new node. ;-)
Click to expand...
CSS: 
//*****************************************************//
//* Creates shadows and scales nodes when mouse hover *//
//*****************************************************//

/* Prepare node for effects */

.template-category_view .block-container .node-body {
 
    /* Remove previous box border */
    border-style: @xf-paletteColor2;
 
    /* For positioning the pseudo-element */
    position: relative;
 
    /* Add shadow effect to non-hover nodes */
    box-shadow: 0px 0px 5px 4px rgba(66, 66, 66, 0.6);    /* box-shadow: x-offset y-offset blur spread rgba(r, g, b, opacity) */
 
    /* transition time to ease back original state (slower) */
    transition: 200ms ease;
}

/* Create the hidden pseudo shadow element */

.template-category_view .block-container .node-list::before {
 
    /* Position the pseudo shadow element. */
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
 
    /* Create the box shadow at expanded size. */
    box-shadow: 0px 0px 15px 4px rgba(99, 99, 99, .6);
 
    /* Hidden by default. */
    opacity: 0;
 
    /* transition time to ease back original state (slower) */
    transition: opacity 200ms;
}

/* Show the pseudo-element on hover */

.template-category_view .block-container .node-body:hover::before {
    opacity: 0;
 
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Scale up the box (node) on hover */

.template-category_view .block-container .node-body:hover {
    transform: scale(1.003);
 
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Adjust Node Title underline position after scale up */

.node-title {
    text-underline-offset: 0px;
}

/* Adjust Sub-node underline position after scale up */

.node-subNodesFlat {
    text-underline-offset: 2px;
}

So basically after tweaking, this is what I put underneath the initial code for the forums in the same layout, but I did get a lot a bugs while fixing it. I am in no way an expert at code so good luck! And about the clicking noise...no clue as I usually have my volume on mute all of the time so, sorry about that! **note I also put the original template for the forum list above this one that I gave in my extra.less template and have had no issues so far so hopefully it'll stay that way!
 
Upvote 0 Downvote
FaeWhisperer said:
So basically after tweaking, this is what I put underneath the initial code for the forums in the same layout, but I did get a lot a bugs while fixing it. I am in no way an expert at code so good luck! And about the clicking noise...no clue as I usually have my volume on mute all of the time so, sorry about that! **note I also put the original template for the forum list above this one that I gave in my extra.less template and have had no issues so far so hopefully it'll stay that way!
Click to expand...

That's great, thanks. I'd love to see it in action. Can you send me a link to your forum, either a PM or post it here if you want too. Thanks!
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom