mib.net
07-02-2011, 23:32
Witam,
Znalazłem bardzo fajny turial w internecie:
http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
Pomyślałem super właśnie tego szukałem, no ale coś mi nie idzie z kodowanie.
To mój KOD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
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 - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
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; /*--Hover effect for browser with js turned off--*/
}
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: bloc
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<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 - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
</script>
</head>
<body>
<ul class="gallery">
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
</ul>
</body>
</html>
Niestety efekt różni się od tego na stronie, co robię źle.
Poniżej spakowane pliki.
3622
Ewentualnie czy ktoś zna jakiś prosty efektowny sposób na zrobienie podobnego efektu...?
Z góry dziękuje za pomoc.
Znalazłem bardzo fajny turial w internecie:
http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
Pomyślałem super właśnie tego szukałem, no ale coś mi nie idzie z kodowanie.
To mój KOD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
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 - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
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; /*--Hover effect for browser with js turned off--*/
}
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: bloc
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<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 - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
</script>
</head>
<body>
<ul class="gallery">
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
<li>
<a href="http://www.wp.pl" class="thumb"><span><img src="przyklad_2.gif" alt="" /></span></a>
<h2><a href="http://www.wp.pl">Stomatologia</a></h2>
</li>
</ul>
</body>
</html>
Niestety efekt różni się od tego na stronie, co robię źle.
Poniżej spakowane pliki.
3622
Ewentualnie czy ktoś zna jakiś prosty efektowny sposób na zrobienie podobnego efektu...?
Z góry dziękuje za pomoc.