Have you ever tried to animate an element, image, shape etc. and struggled with it because you’re not that into code? If you’ve ever tried animating something using JavaScript or jQuery and found that process a bit too cumbersome or complicated, then I feel your pain.
Enter my love affair with CSS (or “Cascading Style Sheets” to be precise). Since I discovered the wonders of CSS I haven’t really looked much into using other methods for creating animations. I’m tellin’ you, there is SO much you can do just using CSS alone that it’s incredible.
Using CSS Hover for Animations
Modern CSS allows you to build surprisingly powerful yet simple animations for your website or blog. This area within the web development world is so broad and extensive that gazillions of books and courses have been created just for this subject alone (the subject of creating CSS animations). So, to keep things simple we’re just gonna focus today on one area within the overall subject, which is creating animations using the CSS hover pseudo-class.
There are so many possibilities for animated effects just using CSS hover alone – and it’s so easy to code and implement! For today’s mini tutorial I’ll use something I created a while back that I call an “animated modern art piece” for lack of a better way to describe it.
Here it is:
Here is an overview (not in exhaustive detail) of how I created a few of these animations:
This is done by first linking to the latest Bootstrap CDN (Content Delivery Network), by pasting the following link into the <head> section of a page or post. It needs to appear first in your code, before any other stylesheet links or references: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
This page from the Bootstrap documentation site contains complete instructions on how to get started using the Bootstrap framework. There are lots of great resources online if you’d like to do some training on this platform, and some classes are free, such as this class from Udemy.
Hot tip from the Dragon:
Bootstrap is based upon a CSS grid system. In order to build a CSS grid using Bootstrap you will need to use the CSS class called “container” and place the rest of your HTML inside of the two “container” tags.
If you’d like the grid to have left and right margins (and not span the entire width of your page, use only “container” as your class, but for a full-width layout use the class “container-fluid” instead. In this particular case I chose to have side margins, so I went with simply “container.”
The container div looks like this: <div class=”container”>
This is how the code for one of the rows is set up:
<div class="row">
<div class="col-sm-4 col-lg-3" id="blueBlock"></div>
<div class="col-sm-4 col-lg-3" id="blackBlock"></div>
<div class="col-sm-2 col-lg-4" id="redBlock"></div>
</div>
Here is the CSS code for the different elements and their corresponding CSS ids:
#blackBlock {
background-color: black;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
height: 100px;
position: relative;
/* border: 4px solid black; */
top: 0;
left: 0;
}
#blackBlock:hover {
width: 2px;
height: 100px;
border: none;
}
#redBlock {
background-color: rgba(227, 35, 35, 0.96);
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
height: 100px;
position: relative;
/* border: 4px solid black; */
top: 0;
left: 0;
}
#redBlock:hover {
width: 493px;
height: 100px;
border: none;
}
#blueBlock {
background-color: rgba(88, 178, 199, 0.9);
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
height: 267px;
width: 60px;
position: relative;
/* border: 1px solid black; */
top: 0;
left: 0;
margin-left: 30px;
margin-bottom: 40px;
margin-right: 40px;
transition: 1s ease;
}
#blueBlock:hover {
-webkit-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
transition: 1s ease;
}
First I set the height at 100px (pixels) in the red part of the image that is always visible. Then I set it so that the red part expands to 493px wide when it’s hovered over. I set the position property as “relative.”
All you really need to figure out is your beginning point and your end point. CSS fills in all the points in-between (isn’t that nice?!) You should wind up with a nice, flowing, evenly-paced animation, without much effort on your part.
The yellow circle in the animation above appears a bit choppy when hovered over; I think this is because I originally created it for a much wider screen and it’s being crammed into a smaller area here on my blog.
To achieve the tilted effect of the blue-gray vertical rectangle (it slants when hovered over) I positioned it as shown in the “#blueBlock” section of code indicated above. Then to get the rectangular block to tilt I used the CSS transform property, and rotated it on the Z axis -10 degrees:
transform: rotateZ(-10deg);
If I used just “10deg” instead of “-10deg” that would have resulted in the rectangle tilting over to the right instead of to the left as it does now.
Next, this code was added to help the transform action to be nice and smooth, and to tell it to only take a timespan of 1 second before it’s done:
transition: 1s ease;
About CSS Keyframes
As you get more and more into animating using CSS you will probably see the term “keyframes” come up. Using keyframes will give you even more power, freedom and flexibility with your animations. We have an article that you can refer to, to learn more about getting started using CSS keyframes.
Keyframes are pretty awesome in that they give you more control over the specific points where you would like something to happen within the animation cycle. You can transition to a different type of animation at any point if you specify that point using the keyframe CSS code. Pretty cool!
Button Hover Effects
My favorite thing to do with the hover pseudo class is to make fun things happen to buttons. Here is the most basic, fundamental way to code a button hover effect using CSS and HTML:
The HTML for that button is as follows:
<button class="coolButton">Hi There!</button>
The CSS for the hover effect is as follows:
.coolButton {
width: 150px;
}
.coolButton:hover {
background-color: gray;
}
On our Code Dragon blog here we have an article that details how to create some slightly more advanced CSS hover effects specifically for buttons. That article has to do with Squarespace, but the CSS is universal and you can use it just about anywhere.
This article from Slider Revolution goes into a little more detail in terms of even more advanced and unusual button hover effects.
Well, that’s about it for today and for our regular dose of coding creativity! Keep learning, exploring and creating – and see you next time!
What other things have you done with the CSS hover code, and/or what else would you like to learn to do with it? Please let me know in the comments.
Thank you for reading and please share this article if you liked it!. Hope you have a good day. 🙂
