Close

Side menu-bar with images

This is an example of the mouse hover effect using pure CSS styles without any JavaScript’s. The slide in animation allows expanding a menu when the mouse cursor hovers over the div whereas the slide-out animation closes the menu when the cursor moves out of the div. It uses the “transform” style to slide in and out of the div. The translated is used to make the slide in and out horizontal. The hover event in styles has been used to append the styles when the cursor gets on a specific div. The “text-transform” style has been used to convert the given HTML text into uppercase automatically by setting its value to “uppercase”. Source: https://codepen.io/codboy_3/pen/pmMzzp

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.