Or use these beautiful animations as inspiration as you make your own unique effects.
A distinctive glitchy hover effect could brand you as a technology company, or gradient animations would work well on upbeat, colorful websites.Ĭode on CodePen is free to use with their license, so try out one of these CSS hover effects for yourself. And while other details like the layout of UI items, fonts, and colors will take up most of your focus, a well-placed hover animation can make a big difference.Īnimations can also help define your brand and the tone of your website, along with help to complement its style. It’s one of the most important parts of a website’s look. When you’re designing a website, don’t neglect UI design. Pure CSS – Image Hover Effect by Bruno Beneducci ( CodePen. Glitch hover effect CSS by Kevin Konrad Henriquez ( CodePen. Pure CSS Thumbnail Hover Effect by Aysha Anggraini ( CodePen. Pure CSS Blur Hover Effect by Matthew Craig ( CodePen.īutton Hover Effects by Kyle Brumm ( CodePen. Gradient Button Hover by Muhammed Erdem ( CodePen.ĬSS Grow Hover Effect by Adam Morgan ( CodePen.ĬSS Background Color Change on Hover by Ian Farb ( CodePen.ĬSS-only Fade Siblings on Hover by Shaw ( CodePen. #1193 – Image & title with icons on hover by ( CodePen. #1107 – Image with slide up title on hover by ( CodePen. Strikethrough hover by tsimenis ( CodePen. To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. Shaking Shapes by Laura Montgomery ( CodePen. Pros Very effective when used in certain kind of tables Cons The necessary tr:hover effect does not work in IE, suitable for certain types of tables only Play with Color scheme, typography, icons and tr:hover effects 7.
Rumble on Hover by Kyle Foster ( CodePen.ĬSS Button On Hover Slide Effect by RazorX ( CodePen.
tr:nth-child(n+4):nth-child(odd) See the complete code on the demo page. This is how the nth-child selector is used: 1. If any of the text on the line of text is clipped, hovering over the line reveals it.UNLIMITED DOWNLOADS: Email, admin, landing page & website templates See this demo where I started styling odd rows differently after first four rows (the row count includes the table header that you may style differently). The 3 required and 1 optional CSS definitions provide the functionality. The overflow:visible declaration makes the entire line visible when the mouse pointer hovers over the line. The text-overflow:ellipsis declaration prints an elipsis where some of the text is clipped. The overflow:hidden declaration hides any text that would otherwise extend past the right side of the container. The white-space:nowrap declaration keeps all text on one line. The max-width:400px declaration is to ensure the container remains smaller than the amount of text (so there can be an example). Here is a note about each declaration in the above example code. The blue CSS declaration is optional.Īdditional declarations may be added to the class. In the above code, the red CSS declarations are required. The class name "one-long-line" may be any class name that works for you.
When text must stay on one line, but there is not enough room for it all, this article provides a solution.Īnd here is the code for the example of the line above.
When the mouse pointer hovers over the line below, the rest of the line is revealed. Use the overflow:visible CSS declaration for the class' :hover selector.Īn example incorporating the above CSS declarations follows. However, there is a way so it can be seen when the mouse pointer hovers over the line of text. If the text didn't need to be seen, it wouldn't have been put there in the first place. Of course, merely clipping text is not a solution in most cases. Now, the class for the container with the one long line of text has these three CSS declarations: Optionally, use the CSS declaration text-overflow:ellipsis to print an elipsis where some of the text is clipped. Which may make the text so small it is hard or impossible to read.Īnother way to correct it is to use the CSS declaration overflow:hidden to clip any text that extends past the right side of the container.Īt this point, the class for the container with the one long line of text has these two CSS declarations: One way to correct it is to reduce the font size of the text until it fits within the container. If there is more text than fits on the line, it will extend past the right side of the div or other container. The CSS declaration white-space:nowrap keeps all text on one line. When text must stay on one line, but there is not enough room for it all, here is a solution.