jQuery ve Css – Greyscale Hover Etkisi
Soh Tanaka tarafından Css ve jQuery kullanılarak hazırlanmış çok farklı bir hover etkisi. Yarısı renkli yarısı gri renkte 204 e 379 ebatlarında olarak hazırlanan resimlerin sadece renkli olan kısmı demo sayfasında görünebiliyor. Mouse herhangi bir resmin üzerine geldiği anda ise renkli olan kısım kayboluyor ve gri renkli olan resim görünüyor. Bu değiş tokuş sırasında ise resimlerde sanki bir matlaşma efekti oluyormuş gibi görünüyor.
 |
 |
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
jQuery url adresi :
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
JavaScript :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> $(document).ready(function() { $("ul.gallery li").hover(function() { //On hover... var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver' //Set a background image(thumbOver) on the <a> tag $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'}); //Fade the image to 0 $(this).find("span").stop().fadeTo('normal', 0 , function() { $(this).hide() //Hide the image after fade }); } , function() { //on hover out... //Fade the image to 1 $(this).find("span").stop().fadeTo('normal', 1).show(); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<style type="text/css"> body { height: 100%; margin: 0; padding: 0; font: normal 10px Verdana, Arial, Helvetica, sans-serif; background: #fff; position: relative; } h1 { text-align: center; font-weight: normal; font-size: 2.5em; } h1 small { display: block; font-size: 0.7em; color: #999; } img {border: none;} ul.gallery { width: 708px; list-style: none; } ul.gallery li { float: left; margin: 10px; padding: 0; text-align: center; border: 1px solid #ccc; -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/ display: inline; /*--Gimp Fix aka IE6 Fix--*/ } ul.gallery li a.thumb { width: 204px; height: 182px; padding: 5px; border-bottom: 1px solid #ccc; cursor: pointer; } ul.gallery li span { /*--Used to crop image--*/ width: 204px; height: 182px; overflow: hidden; display: block; } ul.gallery li a.thumb:hover { background: #333; } ul.gallery li h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; background: #f0f0f0; border-top: 1px solid #fff; /*--Subtle bevel effect--*/ } ul.gallery li a {text-decoration: none; color: #777; display: block;} </style> |
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<ul class="gallery"> <li> <a href="#" class="thumb"><span><img src="images/sushiand.gif" alt="" /></span></a> <h2><a href="#">Sushi & Robots</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/garysrea.gif" alt="" /></span></a> <h2><a href="#">Gary's Life</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/cubescri.gif" alt="" /></span></a> <h2><a href="#">Cube Scripts</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/ryankeis.gif" alt="" /></span></a> <h2><a href="#">Ryan Keiser</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/ricardog.gif" alt="" /></span></a> <h2><a href="#">Ricardo Gimenes</a></h2> </li> <li> <a href="#" class="thumb"><span><img src="images/foodteas.gif" alt="" /></span></a> <h2><a href="#">Food Tease</a></h2> </li> </ul> |
Css3 Login Form |: