Change the opacity of an element on MouseOver using jQuery
Build the HTML
First of all build the container. I'll use an image to create the effect.
<div class="container container2">
<img src="//www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
Code language: HTML, XML (xml)
Wich will have a background image, hidden under the main image.
<style>
.container2{
width:144px;
height:152px;
background-image:url(https://ricard.dev/examples/14/background.jpg);
}
</style>
Code language: HTML, XML (xml)
Add the JavaScript
Now let's use the jQuery code:
<!- Include the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* I'm using the "container" class. You could use any class or ID*/
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
Code language: HTML, XML (xml)
You can change the opacity effect to a lower / higher levels.
Tha's all. Check out the live Demo below or the full code.
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 14 | Developer's Blog</title>
<meta charset="utf-8">
<style>
.container1{
width:144px;
height:152px;
background-color:black;
}
.container2{
width:144px;
height:152px;
background-image:url(https://ricard.dev/examples/14/background.jpg);
}
</style>
</head>
<body>
<h3>With Background color Black</h3>
<div class="container container1">
<img src="//www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<h3>With Background Image</h3>
<div class="container container2">
<img src="//www.quicoto.com/upload/files/2008/11/6341893.jpg" alt="" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".container img").hover(
function() {
$(this).stop().animate({"opacity": "0.2"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</body>
</html>
Code language: HTML, XML (xml)
This Article was mentioned on ricard.dev
I’ve got it! a jquery doc in the wrong place…it finally works π thank you
I’ve been reading it since yesterday, no results so far… Thanks. π
The best way to explain what I want with this scrolling, is by accessing this website, which has pretty much the same thing, also with a cute effect.
try scrolling to see how it looks like
Good afternoon,
I’m a multimedia design student in ESAD, a portuguese college. I’ve been looking for something related to this…I’m finishing my portfolio but something’s missing…..I’m trying to change the colour of my text when scrolling, so that the central part of text turns black and the remaining text (upper, and below) stays grey. Can you help me? I think it can be done with jQuery, but I’m not used to working with jQuery, only PHP and HTML.
Look forward to hear from you,
Andrea
Hi Andrea,
I’m afraid I don’t know how to change the colour text on “scroll”.
Have you tried to look it up in the oficial documentation ? http://jquery.com/
Regards
thanks
hey
that’s fine with the carousel, if you are too busy, don’t worry
yes, I meant the meta keywords:)
how do you mean? Google is no longer using keywords? it is the way people find your site
please explain
Thanks, Nicole
Yes, Matt Cutts from Google explained google is no longer using the meta keywords.
They read all your content in order to show it to the user. They use title, url, metadescription and of course (like I said) the main content.
http://www.youtube.com/user/GoogleWebmasterHelp
Regards
hey Quicoto
thank you for the post, It can be used in so many different ways. I will use it in my store.
Will you write how to add “carousel” to a wordpress blog? I have searched for the right code for quite a while, found a few blogs that gave away many details but the code didn’t want to work, maybe it was designed for a different version of wordpress.
and I have one question: do you know how to block the keywords ( from my website) from being viewed by others, on the Internet? for example through the source code page?
thank you, best wishes
Nicole!
Hi Nicole,
Many questions π
1) I can look for a carousel slideshow but won’t be easy. I hope I can find some time to write it π
2) “keywords”? You mean the meta keywords? Why do you wanna block it? Google is no longer using keywords.
Thanks for commenting.
Regards