How to change Opacity with jQuery

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>

Wich will have a background image, hidden under the main image.

<style>
    .container2{
  		
    	width:144px;
     	height:152px;
      	background-image:url(http://php.quicoto.com/examples/14/background.jpg);    
	  
    }
</style>

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>

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

View demo

<!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(http://php.quicoto.com/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>

10 comments
  • 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

  • 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

  • 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

  • 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

  • I’ve been reading it since yesterday, no results so far… Thanks. 🙂

  • I’ve got it! a jquery doc in the wrong place…it finally works 😉 thank you

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*