Monthly Archives: September 2011

Transitions

There are two transitions happening on this site (at the moment anyway). One is in the header. When you hover over the text “CSS Snippets”, it rotates up. The rotation is actually done with the “transform” property, not “transition”. The transition part is that you can see it rotate up from the starting position to the ending position, instead of just jumping.

The other transition is when you hover over an item in the main menu. The color fades to the hover state, it doesn’t just change colors automatically.

Like many things in CSS you can specify the different parts of the transition individually, or with shorthand. I will be using shorthand unless I have a reason to not use it.

-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;		

Explanation

This is a very simple starting point for transitions. Add this snippet of code to your regular state (for example add it to the css for #navigation li a), not the hover state. If you declare your transition on the regular state, it will perform the transition in both directions, and you won’t have to account for other states like focus or active. When this code is added to the regular state of something on your page, when the hover state is activated (or your return to regular state), the changes in properties will be transitioned over .2 seconds.

The first value is the duration or the transition. The second value is what do you want to transition. “All” will make sure any property that is changed between regular state and hover state gets transitioned. You don’t need to transition all of them, however. Many different properties can use a transition, see this for a list of properties.

The last value is the timing function. For simple transitions, I find “linear” to be fine, however, there are other choices that may work better in some situations.

You can also add a delay, but it can feel weird to the user delay the transition, on simple hovers. There are interesting things you can do with it, however.

The W3C documentation can explain this property in more detail. I will have more specific examples of transitions in the future.

Browser Support

All the latest versions of the major browsers, except of course Internet Explorer, support this property. I have heard it will be supported in IE10. You do need to use the browser prefixes to make it work. If the transition must work in IE, you will have to use Javascript. Usually transitions are nice enhancements, but not necessary, so I don’t mind just using CSS.

Adding a Border to an Image on Hover

This next issue I want to cover is fairly simple, but I ran into a situation last week where I needed to find a solution to this problem, and I wasn’t sure of the best answer. I wanted to add a border on the hover state of an image. The problem is that when you add a border it adds to the width. The size of the box according to the box model is made up of width+padding+border+margin. So if you only have the border when hovering, the width of the object changes. When you have images in a grid, the problem is very obvious and actually almost nauseating to look at!

To see the problem, it will be clearest if you go to Demo page to see it in action.

A simple solution is to add a border on your image, div, etc. (wherever it is you want the border) that is the same color of your background. Obviously, this will only work if you have a solid color background. In my demo, I do, so I will add a white border initially, and change it to black on hover. That way the size never changes, but things look different on hover.

img { 
  border: 3px solid white; 
} 
img:hover { 
  border: 3px solid black; 
} 

To solve the problem mentioned above, you can instead use outline property. This will work when you have an image or gradient in your background. It will also work when your initial image has a border, but you want to make it larger on hover. The outline property uses the same syntax as the border shorthand.

/* Solve problem on a non-solid background */
img:hover { 
  outline: 3px solid black; 
} 

/* Solve problem where border size changes on hover */
img { 
  border: 1px solid black; 
} 
img:hover { 
  outline: 2px solid black; 
} 

Explanation

The reason this works is that outlines do not add width to your objects. They are not really in the flow of your document, so things don’t change when you hover over something. Outlines are uniform on each side. You cannot set top, right, bottom, left to be different, as you can with borders.

Notice in the second solution, where the border-size is changing, I made the outline 2px. This is so the final size of border is 3px (1+2).

Browser Support

When I first came upon this solution, I read that it did not work in IE. However, I tested in IE8 and it worked fine. It does not work in IE7. So, if hovering in IE7, the border will remain the same. It depends on the importance of the that visual effect to your design if you want to find another solution to work in IE7 or not. Another solution would be to have a 2nd image for the hover state, but that comes at a price because you are downloading more images. In most cases, I’m fine with leaving IE7 hover-borderless, but it would depend on the site and audience of course.