Friday, 5 February 2016

How to Use Transitions for Beautiful Hover Effects

As design elements are becoming increasingly more intricate, there are still easy tricks to make your website stand out with minimal code. One of the best examples is using hover effects in combination with transitions. Websites already have buttons that change colors, but the real beauty lies when you combine many hover effects, especially with images.


Image grids are commonly used to showcase portfolios, clients, team photos, or anything your heart desires. It is up to the designer and developer to make these image grids shine. Let’s start with our most important piece of code:


transition: all 1s ease;


Vendor prefixes are necessary for the transition property:
-webkit-transition
-moz-transition
-o-transition


For simplicity, this tutorial does not use any vendor prefixes. Make sure to add vendor prefixes where necessary.


This sets all the hover effects to transition within 1 second and sets the speed of the curve to 'ease'. This effect starts slow, then fast and ends slowly. It is the default curve if none is given. Other curve properties are "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-brezier(n,n,n,n)" which lets you create your own curve. Play with the speed and curve to get the perfect effect you're looking for.


If you only want certain effects to transition but not all of them, you can specify them individually:


transition: width 2s ease, height 4s linear;


Now we use :hover to make the magic happen:
a.button{
background: white;
transition: all 1s ease;
}
a.button:hover{
background: red;
}




Too easy right? Let's make things a little more complicated and start adding transition and hover effects to images. Some of the most common involve a drop shadow, image size, or image color. The code follows the same pattern:
img.dropshadow{
transition: all .5s linear
}
img.dropshadow:hover {
box-shadow: 5px 5px 10px #000;
}




Fancy right? But we can do better. Let’s change the image size. Your first instinct may be to change the width or height of the image. This will change the size but will not contain the image, resulting in unexpected outcome that shifts the entire page. This is not the effect we're looking for. Using transform(scale) will give the best result. We will also add position relative to the image and a higher z-index to the hover so that the image displays on top of the others.
img.scale{
position: relative;
transition: all .5s linear
}
img.scale:hover{
z-index: 2;
transform: scale(1.3)
}




Take a second to take at the sheer awesomeness you just created, because we're not done yet. We can also use transition effects on filters. These can be any filters, such as blur or hue, and this example will use grayscale.
img.grayscale{
transition: all .5s linear;
-webkit-filter: grayscale(1);
}
img.grayscale:hover{
filter: grayscale(0);
-webkit-filter: grayscale(0);
}




This took an image from black and white into full color. If you'd like to see other filters, check them out at http://html5-demos.appspot.com/static/css/filters/index.html


Now it's time to combine these transitions to create the final effect. Since we specify transition all, that will take care of all the hover transitions.
img.example{
position: relative;
transition: all .5s linear;
-webkkit-filter: grayscale(1);
}
img.example:hover{
z-index: 2;
box-shadow: 5px 5px 10px #000;
transform: scale(1.3);
filter: grayscale(0);
-webkit-filter: grayscale(0)
}




In all these examples, I used a speed of .5s and a linear curve. Feel free to play around and find the timing and curve that fits your style.

There are many combinations of filters and other properties to create unique hover effects. Do you have any favorites that work well together? Feel free to share your thoughts in the comment section below or tweet @Swagger_Media! And if you’re interested in optimizing your website and need some help, our team is here to assist you. Give us a call at 832-831-7592!  






No comments:

Post a Comment