Przeglądając galerie zdjęć dostępnych w Internecie z pewnością zetknęliście się z przypadkiem, kiedy po najechaniu na jakiś obrazek rozświetla się on, bądź odwrotnie, inne stają się ciemniejsze od tego wskazanego kursorem. Efekt ten można osiągnąć stosując standardowy pseudoselektor :hover dostępny w CSS. Jest to jednak metoda pozbawiona dynamicznego przejścia obrazka ze stanu A w stan B. Aby poprawić ten efekt, można posłużyć się prostym skryptem w jQuery.
Standardowa metoda w CSS
Ustawmy w dokumencie testowy obrazek i nadajmy mu klasę „obrazek„. Standardowo przypiszmy mu własność opacity z wartością 0,5. Po jego najechaniu (:hover) zmieńmy tę wartość na 1. Tym sposobem otrzymamy prosty przykład rozjaśnienia obrazka po jego najechaniu.
[codesyntax lang=”css”]
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<style type="text/css">
.obrazek {
opacity: 0.5;
}
.obrazek:hover {
opacity: 1;
cursor: pointer;
}
</style>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
[/codesyntax]
To samo, ale w jQuery
Do wykrycia zdarzenia przyda nam się funkcja hover(). Tak jak w poprzednim przykładzie, po najechaniu obrazka kursorem myszy, zmienimy wartość własności opacity z 0.5 na 1. Z tą jednak różnicą, że dynamicznie.
[codesyntax lang=”javascript”]
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.obrazek').css('opacity', 0.5);
$('.obrazek').css('cursor', 'pointer');
$('.obrazek').hover(function() { //kursor wchodzi
$(this).stop().animate({'opacity': 1}, "slow");
},function() { //kursor wychodzi
$(this).stop().animate({'opacity': 0.5}, "slow");
});
});
</script>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
[/codesyntax]
To samo, ale na odwrót
Przydatna może okazać się także potrzeba przyciemnienia wszystkich obrazków, oprócz tego najechanego.
[codesyntax lang=”javascript”]
<html>
<head>
<title>Plynny hover po najechaniu obrazka w jQuery</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.obrazek').css('cursor', 'pointer');
$('.obrazek').hover(function() { //kursor wchodzi
$('.obrazek').stop().animate({'opacity': 0.5}, "slow");
$(this).stop().animate({'opacity': 1}, "slow");
},function() { //kursor wychodzi
$('.obrazek').stop().animate({'opacity': 1}, "slow");
});
});
</script>
</head>
<body>
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
<img src="img.png" class="obrazek" alt="" />
</body>
</html>
[/codesyntax]
A co powiesz na :hover + transitions w CSS? 😉
Powiem, że to całkiem niezły pomysł 🙂
Myślę, że jest to wręcz doskonały pomysł, korzystam z tego sposobu od jakiegoś czasu.
Fajny pomysł 🙂 a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis?
a co zrobić żeby po najechaniu myszką na środku zdjęcia pojawił się napis? jak się taki efekt nazywa?
Tutaj także można zastosować hover(), jednak należy dopisać osobny kontener na tekst, który będzie się pojawiać na obrazku