i have following div html code.

```
<div class="container">

                        <div class="images">
                                <img src="<?php echo base_url();?>assets/images/products/<?php echo $product->image;?>" />

                        </div>

                        <div class="compareme"><h3>Compare Me</h3></div>

</div>

```

And followig CSS and jquery code:

```
.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;

    font-size:12px;

}

$('.product-images').on('mouseover',function(){
        $('.compareme').show();

    });

```

the problem is, when i hover that .image div, the all divs display that compare me message.
What i actually wanted is like when I over over the .image div, that particular .compareme should appear and fade away when i remove mouse from my .image div

So, please help on this

Thanks in advance