https://github.com/vratskyi/hover-item

Hover any item you want (in DOM)
https://github.com/vratskyi/hover-item

css css-hover-animation css-hover-effects css3 css3-animations javascript js

Last synced: 3 days ago
JSON representation

Hover any item you want (in DOM)

• Host: GitHub
• URL: https://github.com/vratskyi/hover-item
• Owner: vratskyi
• Created: 2023-01-17T02:02:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-25T12:33:01.000Z (over 1 year ago)
• Last Synced: 2025-02-10T06:42:21.882Z (5 months ago)
• Topics: css, css-hover-animation, css-hover-effects, css3, css3-animations, javascript, js
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hover-item

Hover any item  you want (in DOM)

After include this script just add ``id="hoverItem"`` to any DOM element wich you want to hover 
 

and replace ``pulseNeon`` to your CSS ``class`` 



## Example sandbox: VIEW

    


    Full Name: Oleksii

    Vratskyi

    


## Result

![enter image description here](https://vratsky.com/hoverItemGif.gif)

## CSS Class from example

    .pulseNeon  {

    	animation:  pulsate 1.5s  infinite  alternate;

    }

    // Animation

    @keyframes  pulsate  {

    100% {

    /* Larger blur radius */

    text-shadow:  0  0  4px  #ffffffc5,  0  0  11px  #ffffffc5,  0  0  19px  #ffffffc5,

    0  0  40px  #8b5cf6,  0  0  80px  #8b5cf6,  0  0  90px  #a855f7,  0  0  100px  #ec4899,

    0  0  150px  #f43f5e;

    }

    0% {

    /* Smaller blur radius */

    text-shadow:  0  0  4px  #f8abff,  0  0  11px  #f8abff,  0  0  19px  #f8abff,

    0  0  40px  #540bfd,  0  0  80px  #9a2eff,  0  0  90px  #9a2eff,  0  0  100px  #d61636,

    0  0  150px  #d61636;

    }

    }

# Enjoy 😇