CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Ram_UI
Ram_UI

Reputation: 485

mouse hover effect on image

before mouse hover on the image

after mouse hover on the image

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/) i m 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>

Upvotes: 0

Views: 411

Answers (4)

jbutler483
jbutler483

Reputation: 24549

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>

Upvotes: 4

Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

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

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

Upvotes: 0

Sharon
Sharon

Reputation: 177

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>

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 0

Related Questions