鼠标悬停在图像上的效果

Question

initially image only visible and the buttons are hide back of image. On image mouse hover the image going little top and buttons will come on bottom of image. but how to hide the buttons back in image??

before mouse hover the image only visible after mouse hover on image messup and visible the buttons. i tried like this but not getting, here snippet for reference ( http://www.olleep.com/ ) im trying to do same

 $(document).ready(function() { $('#textbox').mouseenter(function() { $('#textbox').animate({ 'marginTop' : "-=30px" //moves up }); }); $('#textbox').mouseleave(function() { $('#textbox').animate({ 'marginTop' : "+=30px" //moves up }); }); }); 

 .container{ margin:50px; } #textbox{ position:relative; width:300px; } #text{ position:relative; overflow:hidden; z-index:1; background-color:#282727; text-align:center; padding:10px 10px 10px 10px; } 

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="textbox"> <img src="http://i.imgur.com/9hr2mlL.png" width="300px"> <div id="text"> <button class="btn btn-danger btn-md">MORE INFO</button> <button class="btn btn-danger btn-md">BOOK NOW</button></div> </div> </div> 

Answer 1

You can do this with CSS alone, still with adding hover effects, then using transform:translateY to toggle these on screen:

 div { display: inline-block; } .wrapper { overflow: hidden; position:relative; } .buttons{ position:absolute; bottom:0; width:100%;background:dimgray; font-size:0;height:40px; transition:all 0.4s; transform:translateY(100%); } .buttons button{ width:40%;margin:5%;font-size:15px; } .wrapper img{ transition:all 0.4s;} .wrapper:hover .buttons{ transform:translateY(0); } .wrapper:hover img{ transform:translateY(-35px); } 

 <div class="wrapper"> <img src="http://i.imgur.com/9hr2mlL.png" /> <div class="buttons"> <button>Button 1</button> <button>Button 2</button> </div> </div> 

Answer 2

You can use CSS to do that. Try :hover , check below example.

 .container { margin: 50px; } #textbox { position: relative; width: 300px; } #text { position: relative; overflow: hidden; z-index: 1; background-color: #282727; text-align: center; padding: 10px 10px 10px 10px; display: none; } #textbox:hover #text { display: block; } 

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div id="textbox"> <img src="http://i.imgur.com/9hr2mlL.png" width="300px"> <div id="text"> <button class="btn btn-danger btn-md">MORE INFO</button> <button class="btn btn-danger btn-md">BOOK NOW</button> </div> </div> </div> 

Answer 3

Add $('#text').show(); and $('#text').hide();

 $(document).ready(function() { $('#textbox').mouseenter(function() { $('#text').show(); $('#textbox').animate({ 'marginTop' : "-=30px" //moves up }); }); $('#textbox').mouseleave(function() { $('#text').hide(); $('#textbox').animate({ 'marginTop' : "+=30px" //moves up }); }); }); 

 .container{ margin:50px; } #textbox{ position:relative; width:300px; } #text{ position:relative; overflow:hidden; z-index:1; background-color:#282727; text-align:center; padding:10px 10px 10px 10px; } 

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="textbox"> <img src="http://i.imgur.com/9hr2mlL.png" width="300px"> <div id="text"> <button class="btn btn-danger btn-md">MORE INFO</button> <button class="btn btn-danger btn-md">BOOK NOW</button></div> </div> </div> 

Answer 4

You can do it with simple .hide() and .show()

Check this http://codepen.io/vigneshvdm/pen/PNLJKL