CODEWITHSUNDEEP
javascripthtmlcss
user2997448
user2997448

Reputation:

image slide out from behind another image on hover

i found a topic that one of friends needs something really close to what i want but because I'm just an amateur in new CSS and JQuery i couldn't figure it out! and that topic was for like 2012 and that was old!
The topic in question

so what i want is like the one in this website:
point the cursor at the cinemagraph bird logo at the middle of screen

differences are:
1) in the topic i linked the animation goes without attention to mouse position but in my example it animates while cursor is over it and it rewinds when the mouse got out
2) in my example both images moving aside but in that topic it was not

and other differences u can see yourself

Thanks for your responses

Upvotes: 0

Views: 1559

Answers (1)

lostsource
lostsource

Reputation: 21830

Try this to achieve a similar effect.

Create two <div> elements inside an outer <div>

<div id='outer'>
   <div id='inner'>
       <!-- put first image here -->
   </div>
   <div id='sub'>
       <!-- put second image here, this will appear on hover -->
   </div>
</div>

Then apply the following CSS to achieve the hover effect:

#outer {
    width:100px;
    margin:10px auto;
    height:80px;
    position:relative;
    overflow:hidden;
    transition: width .5s;  /* change width over a period of 500ms */
}

#inner {
    height:100%;
    position:absolute; 
    width:100px;
    left:0px;
    top:0px;
    background-color:#9b3d3d;
}

#sub {
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    width:100px;
    opacity:0;
    background-color:#3a6d90;    
    transition: opacity .5s;  /* change opacity over a period of 500ms */
    z-index:-1;
}


#outer:hover {
    width:200px; /* expand outer div on hover , exposing the 'sub' div */
}

#outer:hover #sub {
    opacity:1;  /* change opacity to 1 so 'sub' div becomes visible */
}

The idea is to have the <div> with id 'sub' to be initially hidden. Once the outer div is hovered the 'sub' div will be revealed.

Here's a JSFiddle demonstrating the concept: http://jsfiddle.net/X53na/1/

Upvotes: 1

Related Questions