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% ;
Search WWH ::




Custom Search