CSS Hover Effects
CSS effects are a simple way to add interesting user interactivity to a page. When elements are hovered over, the syle of CSS elements can…
CSS effects are a simple way to add interesting user interactivity to a page. When elements are hovered over, the syle of CSS elements can be manipulated to develop smooth and straightforward animation and flair to your websites front end, as long as they are not overused.
The example above shows a very basic example of the CSS hover effects functionality. When the div box is hovered over, the background colour of the box switches from red to green. This is implemented by adding a duplicate extra entry to the CSS document with “:hover” appended. The desired changes to the style on hover is added to this entry:
div {
width: 300px;
height: 300px;
background-color: red
}
div:hover {
background-color: green
}To make such hover effects smoother, we can add some transition into the mix. This is a very simple but effect method to improve the aesthetics of the transition:
div {
width: 300px;
height: 300px;
background-color: red;
transition: 0.5s
}
div:hover {
background-color: green;
scale: 90%
}https://codepen.io/JamesRobertSutcliffe/pen/eYQOeRw
This is something I implement heavily as part of the theme of the theme for my founders and coders application website, with the layout based heavily around backdrops and text that transition on hover in various minimal actions, please check this out below.
James' Application Website
jamesrobertsutcliffe.github.io
Thanks for reading my first blog post :)
Please follow me on medium and Twitter for updates and new stories every week.