CODEWITHSUNDEEP
jqueryhtmlcss
no0ne
no0ne

Reputation: 2679

display text on hover image - but only on image

I need to display a caption text on image on hover but so that only the image is affected. The way it works now is that the entire div including the button below the image are affected. How can I get the hover effect to affect only he image and leave the buttons unchanged? So far I've tried shuffling around the caption divs but with no luck. Since the image is responsive (not in this example) I can not define an exact height for the fadeIn_capsFull class
Any suggestions?

Have a look at this FIDDLE

HTML

<div class="product-display fadeIn_caption">
<div class="fadeIn_capsFull">
<div class="capsFull_Text"><h5>PRODUCT ID12</h5><br>$225.00</div>
</div>
<a href="">
<img src="http://placehold.it/400x450" class="product-image" alt="">
</a>
<div class="product-addOptions">
<div class="product-toCart">Add to Cart</div>
<div class="product-toCompare">Add to Compare</div>
</div>
</div>

CSS

.fadeIn_capsFull {position:absolute; top:0; left:0; background:rgba(255, 255, 255, 0.75) ; width:420px; height:100%;display: table;  display: none; text-align:center; color:#000 !important; z-index:2; cursor:pointer;}
.capsFull_Text { padding-top: 24%; text-align: center; }
.product-display { width:400px; min-height: 400px; padding: 10px; font-size: 13px}
.product-image {margin-bottom:10px; border-bottom: 1px solid #000;}
.product-addOptions { width: 100%; background-color: #0CF;}
.product-toCart { width: 50%; border-right: 1px solid #000; float:left; text-align:center; padding-top:5px; }
.product-toCompare {width: 49%; float:left; text-align:center; padding-top: 5px; }

jQuery

$("[rel='tooltip']").tooltip();    

$('.fadeIn_caption').hover(
    function(){
        $(this).find('.fadeIn_capsFull').fadeIn(250)
    },
    function(){
        $(this).find('.fadeIn_capsFull').fadeOut(205)
    }
);

Upvotes: 1

Views: 562

Answers (5)

Razzildinho
Razzildinho

Reputation: 2584

Updated fiddle.

Checking the height of the image and also the top position to apply to the caption div.

$('.fadeIn_caption').hover(
    function(){
        $(this).find('.fadeIn_capsFull').fadeIn(250)
            .height($(this).parent().find('img').outerHeight(true))
            .css("top", $(this).parent.find('img').offset().top-$(this).parent().offset().top);
    },
    function(){
        $(this).find('.fadeIn_capsFull').fadeOut(205)
    }
);

Upvotes: 1

Mr.Cocococo
Mr.Cocococo

Reputation: 1451

Try to add this code inside hover event handler. It will set the height of the div based on the height of the image. 

 $('.fadeIn_capsFull').height($('img').height()+20);

so it will be

$('.fadeIn_caption').hover(
        function(){

            $('.fadeIn_capsFull').height($('img').height()+20);
            $(this).find('.fadeIn_capsFull').fadeIn(250)
        },
        function(){
            $(this).find('.fadeIn_capsFull').fadeOut(205)
        }
    );

Note: +20 is set because of the css file that set margin-bottom:10px, and border, etc.

http://jsfiddle.net/uawG9/

Upvotes: 0

coder006
coder006

Reputation: 525

I would suggest a much simpler method. It does not look very stylish but just works! Remove all the things you have added for the tool tip text. And now just add whatever you want to show on mouse hover in the title attribute of that element:

<element title="Tool tip text you want">...</element>

In this case it would be like this:

<a href="">
<img title="Tool tip text" src="http://placehold.it/400x450" class="product-image" alt="">
</a>

Upvotes: 1

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

EDIT:

Try this

1. Close the div properly

2. Provide custom min-height for class .fadeIn_capsFull

FIDDLE: http://jsfiddle.net/QL3jD/26/

I just provide the min-height for the class .fadeIn_capsFull

Upvotes: 0

huncyrus
huncyrus

Reputation: 658

Or if you want to use some jQuery plugin, check this

Upvotes: -1

Related Questions