When the mouse stops moving, the timeout in the JavaScript adds a class to the parent element which sets the animation-play-state property of the pseudo-element to paused and, when the mouse is moved again, this class is removed. When the mouse first moves over the image it is, optionally, converted to grayscale and the background-color of the pseudo-element begins animating. We ensure the image is visible behind the pseudo-element by setting the mix-blend-mode property of the latter. The image will need to be wrapped within another tag, if it isn't already, and then a pseudo-element will need to be added to that tag, positioned to sit directly on top of the image, with an initial opacity of 0. You can achieve this with CSS animations, using Javascript to toggle a class when the mouse moves over the image, or stops doing so.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |