Coders' Guidebook

How to modify content when hovered over

Have you ever wanted to make your website a little more interactive? Perhaps you want an image to fade out slightly when hovered over, or maybe you want an object to shift to the side when it's focused on. These things and more are possible using CSS. In this tutorial, we will learn how to use CSS transitions and the webkit to transform our content when hovered over by the reader. You can apply these techniques to a variety of content including images, text, buttons and containers.

The CSS transition property and :hover selector

The core CSS tools we will use are the transition property and :hover selector. The transition property determines which attribute will be targeted, as well as the timing, speed and delay of any changes. For example, if you were looking to modify the height of an image with the class 'main-image' then you could write something like this in your main.css stylesheet:

.main-image {
	transition: height 3s ease 1s;
	-webkit-transition: height 3s ease 1s;
}

The above transition property applies to the height attribute of any objects with the 'main-image' class. Any height transitions will last 3 seconds, ease in and out (start and finish slowly) and only begin after the element has been hovered over for 1 second. If multiple attributes of the 'main-image' class will be targeted and you want them all to share the same transition property then you could replace 'height' with 'all'. There are also alternative speed settings. While 'ease' will make the transition start and end slowly but speed up in the middle, you could only change the start or end part by using the 'ease-in' and 'ease-out' attributes, respectively. If you want the transition to be a single-speed throughout then you should use 'linear'.

One last thing to note about the above code is that we declare the transition property a second time but with the -webkit- prefix. This is to ensure the transition property will work on old versions of Safari (prior to 6.1).

The transition property determines how a transition will run but it does not do much in isolation. Any changes that will take place must be declared separately. To specify a change that will occur when an element is hovered over you should use the :hover selector. For example, if you want to modify an element with the 'main-image' class when it is hovered over then you should create a new entry in the CSS stylesheet like this:

.main-image:hover {
	/* Any CSS properties entered here will apply to objects with the 'main-image' class when they are hovered over */
}

Now we're up-to-speed on what the transition property and :hover selectors are we can set to work on modifying our content.

Fade out elements using opacity

In this section, we will learn how to fade out an element on your website. You can fade out elements partially or entirely by modifying their opacity. To see this in action, hover your mouse over the image and text below. The image will partially fade out while the text will become completely invisible.

Watch me disappear!

The opacity property can be set to any value between 0 and 1. 0 is invisible while 1 is fully visible. Simply apply your chosen opacity value to the :hover selector entry for the class you wish to style:

.main-image:hover {
	opacity: 0.7;
}

Nudge/shift elements to the side

To nudge an element to the side when it is hovered over by the user's mouse you should utilise the 'transform' property. The transform property allows you to shift an element along the X-axis (horizontally) or Y-axis (vertically) of the webpage.

.main-image:hover {
	/* Nudge the element 5px to the right when hovered over */
	transform: translateX(5px);
}
.main-image:hover {
	/* Nudge the element 5px up when hovered over */
	transform: translateY(-5px);
}
.main-image:hover {
	/* Nudge the element 10px to the right and 5px down when hovered over */
	transform: translate(10px, 5px);
}

Rotate elements

The transform property also allows you to rotate elements. Simply specify the angle (in degrees) that you would like to rotate the element by:

.main-image:hover {
	/* Rotate the element clockwise 20 degrees when hovered over */
	transform: rotate(20deg);
}

You can also rotate an element in 3D. Simply enter in the brackets the X, Y and Z axes coordinates followed by the angle. It is also possible to just rotate the element along one axis if you specify which axis you are targeting:

.main-image:hover {
	/* Rotate the element 30 degrees along the Y and Z axes when hovered over */
	transform: rotate3d(0, 1, 1, 30deg);
	
	/* Rotate the element 15 degrees along the X axis only */
	transform: rotateX(15deg);
}

<<< Previous

Next >>>