/* Item Name : HoverMe - Collection of CSS3 Hover Effects Author URI : http://themeforest.net/user/Keliah Version : 1.0 */ /* TABLE OF CONTENTS 01 SIMPLE BORDER 02 SHADOW & ZOOM 03 BORDER & ZOOMIMG */ /* DEFAULTS PAGE STYLING - FOR DEMO ONLY */ /* You can safely remove / modify the following markup as it's only for the demo purpose */ .mydata th{ width:160px;border:1px solid #CCCCCC; /*background:url(images/bg_7.gif);*/ text-align:center; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; padding:5px; } .mydata td{ width:160px;border:1px solid #CCCCCC;background:url(images/bg_7.gif); text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:5px; } .smallLetter{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:11px; } .f_action{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:9px; color:#666666; text-decoration:none; } .f_action a{ text-decoration:none; } .f_action a:hover{ color:#CC0000; text-decoration:underline; } .content_inner ul li { float:left; margin-right: 20px; height:auto; } h1 { font-size:30px; letter-spacing:-1px; margin:20px 0px 20px 0px; color:#FFFFFF; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 40px; } /* _______________________________________ 01 SIMPLE BORDER _______________________________________ */ .borderall{ border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .border_a a { border:1px solid #FFFFFF; /* The demo imges have a size of 300x200px, we remove here 20px because of the border to keep the exact 300x200px size */ margin-left:5px; width:80%; padding:7px; text-align:right; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; float:right; background:url(images/bg_7.gif) repeat-x; /* background: -webkit-gradient(linear, left top, left bottom, from(#CCFF66), color-stop(0.25, #CCFF66), to(#FFFFF)); background: -moz-linear-gradient(top, #ddd, #CCFF66 25%, #FFFFFF );*/ /* CSS3 transitions working only for modern browsers */ -webkit-transition: border 0.4s ease; -moz-transition: border 0.4s ease; -o-transition: all 0.4s ease; transition: border 0.4s ease; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .border_b a { border:1px solid #FFFFFF; /* The demo imges have a size of 300x200px, we remove here 20px because of the border to keep the exact 300x200px size */ margin-left:5px; width:80%; padding:3px; text-align:right; text-decoration:none; float:right; background:url(images/back2.jpg) repeat-x; /* background: -webkit-gradient(linear, left top, left bottom, from(#CCFF66), color-stop(0.25, #CCFF66), to(#FFFFF)); background: -moz-linear-gradient(top, #ddd, #CCFF66 25%, #FFFFFF );*/ /* CSS3 transitions working only for modern browsers */ -webkit-transition: border 0.4s ease; -moz-transition: border 0.4s ease; -o-transition: all 0.4s ease; transition: border 0.4s ease; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .border img { border:2px solid #CCCCCC; /* The demo imges have a size of 300x200px, we remove here 20px because of the border to keep the exact 300x200px size */ width:100px; height:90px; /* CSS3 transitions working only for modern browsers */ -webkit-transition: border 0.4s ease; -moz-transition: border 0.4s ease; -o-transition: all 0.4s ease; transition: border 0.4s ease; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding:5px; margin:10px; } .border img:hover { border:2px solid #CC0066; /* Changing the border color on mouse hover */ } .border_a a:hover { border:1px solid #CC0066; /* Changing the border color on mouse hover */ /* background: -webkit-gradient(linear, left top, left bottom, from(#FFFF), color-stop(0.25, #FFFFF), to(#CCFF66)); background: -moz-linear-gradient(top, #ddd, #FFFFFF 25%, #CCFF66);*/ background:url(images/back.jpg) repeat-x; } .border_b a:hover { border:1px solid #CC0066; /* Changing the border color on mouse hover */ /* background: -webkit-gradient(linear, left top, left bottom, from(#FFFF), color-stop(0.25, #FFFFF), to(#CCFF66)); background: -moz-linear-gradient(top, #ddd, #FFFFFF 25%, #CCFF66);*/ background:url(images/back2.jpg) repeat-x; } /* 2. BOX SHADOW */ .boxshadow img { /* Setting a black blur effect around images */ -moz-box-shadow: 0 0 20px #000000; -webkit-box-shadow: 0 0 20px #000000; box-shadow:0px 0px 20px #000000; /* Transitions for modern browsers */ -webkit-transition: -webkit-box-shadow 0.4s ease; -moz-transition: -moz-box-shadow 0.4s ease-in-out; } .boxshadow img:hover { /* Changing the color of the blur on mouse hover */ -moz-box-shadow: 0 0 20px #666666; -webkit-box-shadow: 0 0 20px #666666; box-shadow:0px 0px 30px #666666; } /* _______________________________________ 02 SHADOW & ZOOM _______________________________________ */ .zoom img { /* CSS3 transitions to resize the image and set a glow, the "scale" is the ratio to resize the image, the box shadow is the glow effect and the duration the timing of the effect on mouse hover */ -webkit-transform:scale(0.9); -webkit-box-shadow:0px 0px 30px #000000; -webkit-transition-duration: 0.5s; -moz-transform:scale(0.9); -moz-box-shadow:0px 0px 30px #000000; -moz-transition-duration: 0.5s; -o-transform:scale(0.9); -o-transition-duration: 0.5s; box-shadow:0px 0px 30px #000000; } .zoom img:hover{ /* On pouse hover, the scale mkes the image grow and the box shadow makes the glow lighter with the #666666 color */ -webkit-box-shadow:0px 0px 30px #666666; -webkit-transform:scale(1); -moz-box-shadow:0px 0px 30px #666666; -moz-transform:scale(1); -o-transform:scale(1); box-shadow:0px 0px 30px #666666; } /* _______________________________________ 03 BORDER & ZOOM _______________________________________ */ .zoom_border img { /* Same as above with an additional border, we set a smaller width and height to keep a 300x200px size with the 10px border */ border:10px solid #FFFFFF; width:280px; height:180px; -webkit-transform:scale(0.9); -webkit-transition-duration: 0.5s; -moz-transform:scale(0.9); -moz-transition-duration: 0.5s; -o-transform:scale(0.9); -o-transition-duration: 0.5s; } .zoom_border img:hover{ border:10px solid #AAAAAA; /* Changes the color border on mouse hover */ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); }