HTML and CSS Reference
In-Depth Information
Although this works in most modern browsers, it will not work in IE9. But even in unsupported
browsers, the user will see the color change and icon; they just won't see the animation effect.
On most websites, this enhancement wouldn't be necessary for all users. But if support is a
priority, look into this
jQuery back-up
.
34
Finally, let's bring all of the styles together:
.hover-panel
{
background-color
:
#E6E2DF
;
background-image
:
url(hover-panel-icon.png)
;
background-position
:
292px 10px
;
background-repeat
:
no-repeat
;
color
:
#B2AAA4
;
display
:
block
;
float
:
left
;
height
:
130px
;
width
:
262px
;
margin
:
0 10px 10px 0
;
padding
:
15px
;
-moz-transition
:
all 0.2s ease
;
/* FF3.7+ */
-o-transition
:
all 0.2s ease
;
/* Opera 10.5 */
-webkit-transition
:
all 0.2s ease
;
/* Saf3.2+, Chrome */
transition
:
all 0.2s ease
;
}
.hover-panel h3
{
font-family
:
tandelle-1, tandelle-2, Impact, Sans-serif, sans
;
font-size
:
38px
;
line-height
:
1
;
margin
:
0 0 10px
;
text-transform
:
uppercase
;
}
.hover-panel p
{
font-size
:
12px
;
width
:
65%
;