javascript - How to do image slide over another image when mouse over..? -

javascript - How to do image slide over another image when mouse over..? -

html

<img id="1" src="http://tinyurl.com/ksl52ao"/> <div class="wrap" id="2"> <img src="http://tinyurl.com/lgua65m"/> <p class="text_over_image" style="font-size:36px;">text</p> </div>

css

.wrap { height:auto; margin: auto; text-align:center; position:relative; } .text_over_image { position: absolute; margin: auto; top: 0; left:0; right:0; bottom:0; color:red; height:0px; }

jquery

$("#2").hide(); $("#1").mouseover(function(){ $("#1").hide(); $("#2").show(); }); $("#2").mouseout(function(){ $("#2").hide(); $("#1").show(); });

here can show hidden image when mouse on image. need slide sec image bottom top when mouse over. jsfiddle

apply next give effect need.

class="snippet-code-js lang-js prettyprint-override"> $(function(){ $("#container").hover(function(){ $("img", this).stop().animate({top:"-130px"},{queue:false,duration:200}); }, function() { $("img", this).stop().animate({top:"0px"},{queue:false,duration:200}); }); }); class="snippet-code-css lang-css prettyprint-override">#container { margin:100px auto; width:909px; } #container { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; } #container img { position:absolute; } .text_over_image { position: absolute; margin: auto; top: 0; left:0; right:0; bottom:0; color:red; height:0px; } .simg{ position:relative; top:130px; left:0; } } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="fimg"><a href="#"><img height="130px" width="100%" src="http://tinyurl.com/ksl52ao" alt="" /></a> </div> <div class="simg"> <a href="#"><img height="130px" width="100%" src="http://tinyurl.com/lgua65m" alt="" /><p class="text_over_image" style="font-size:36px;">text</p></a> </div>

check fiddle.

you can check fiddle here.

javascript jquery html css css3