CODEWITHSUNDEEP
javascriptjquerycsshtml
Rob
Rob

Reputation: 1280

How to make an image appear over another with jQuery

So after attending a local coding club meeting for the first time I became inspired to look into jQuery again and try and replicate something one of the speakers talked about. I have got the general idea of the problem done ok, it's just that I can't seem to make the image (that is being hovered over by the cursor) appear over the image that isn't been hovered over. I thought that adjusting the z-index would help negate this but nothing appears to be working.

I have uploaded the files etc to http://www.downloadthatmovie.com/jquery/, and here is the source code for the page:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Animation 3</title>
<style type="text/css">
    .imgOpa
    {
        height:200px;
        width:200px;
        opacity:0.5;
        filter:alpha(opacity=50);
        z-index:0;
    }
    article{
        padding:20px;
    }

    img{
        z-index:0;
    }
</style>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

</head>

<body>

<article>
  <p>
    <img class="imgOpa" src="img/image1.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image2.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image3.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image4.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image5.jpg" alt="Image 1"  />
  </p>
</article>

<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
    },
function() {
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
    })
  });
});
</script>

</body>
</html>

The way the images behave right now probably looks weird, but I'm just testing a few things out before I tackle a larger problem. As I said earlier, I am wanting the image that is being hovered over by the cursor to be above the other images. It has been 4 months since I last touched jQuery but have finally kicked myself awake and am re-acquainting myself with it.

Cheers everyone!

Upvotes: 0

Views: 2576

Answers (2)

Zach Lysobey
Zach Lysobey

Reputation: 15744

from the sitepoint z-index reference page: [z-index] specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

Upvotes: 1

Călin Darie
Călin Darie

Reputation: 6237

This SO thread pointed me to on this post on stacking context. Just add 

.imgOpa
{
    position: relative;
}

Upvotes: 1

Related Questions