CODEWITHSUNDEEP
jqueryhtmlcssanimation
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11822

on hover animate the background image but not the text on top

I am bit stuck at some point.So on hover over the background image grows bigger.But if I put a text on that image then animation doesn't work quite well.Let me show you my code

HTML

<div class="resize">
    <a id="apply" href="" target="_blank">
        <!--<h1 class="grow">Search & Apply</h1>-->
        <img class="title" src="images/search_inactive1.png">
    </a>
</div>

Jquery

$('.title').hover(function(){
    $(this).animate({ width: "+=40",height: "+=40",top: "-=20",left: "-=20"}, 130);                             
}, 
function(){
    $(this).animate({ width: "-=40",height: "-=40",top: "+=20",left: "+=20"}, 200);                      
});

CSS

.resize img {
    position: relative;
    width: 110px;
}

Is there any way to tell jquery not to animate the text and just only the background image.

Thanks in advance.

JSfiddle link http://jsfiddle.net/jHeDQ/3/

Upvotes: 0

Views: 364

Answers (2)

Dziad Borowy
Dziad Borowy

Reputation: 12589

Or you can drop JavaScript (if you don't need IE<=8 support) and use css transform, e.g.: 

.resize .title { 
    position: relative; 
    width: 110px; 
    transition: all .3s ease-out;
    transform-origin: 50% 50%;
}
.resize:hover .title { transform: scale(1.3); }

full fiddle-example here

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11303

Set your selector on the container not the image alone, as the text is positioned over it,

$('.resize)

Instead of 

$('.title')

Js Fiddle

==== Edit====

For further clarification the .stop() method was used in order to avoid playing the animation every time the mouse enters and exits resulting in a "broken" animation.

The .find() method was used to find the children with the class .title.

Upvotes: 1

Related Questions