Slide Up a div element inside a div element
Question
How can I slide up div id with "front" when hovering on div id with "card1" also when the mouse pointer is not on that div, div id with "front" should slide down. Please have CSS for reference
<html>
<head>
<style>
.cards{
position:relative;
}
#front{
position:absolute;
left:50px;
z-index:2;
background-color:red;
color:white;
height:200px;
width:200px;
border-radius:5px;
}
#back{
position:absolute;
left:50px;
z-index:1;
height:200px;
width:200px;
background-color:blue;
color:white;
border-radius:5px;
}
</style>
</head>
<body>
<div class="cards" id="card1">
<div id="front">
<div class="caption" style="text-align:center;">
<h6><b>Hello</b></h6>
</div>
</div>
<div id="back">
<div id="buttons">
<button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button>
<button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button>
<button class="btn btn-primary lis">show message</button>
</div>
<div id="buttons">
<img id="imagesLg" src="thiser.gif" alt="HelloWorld"/>
</div>
</div>
</div>
</body>
</html>
Thanks in advance.
2 answers
solution1
0 2017-10-16 12:05:05
You can achieve that using javascript.
Put two event listener on '#card1'.
First mousein, on mousein elevate the '#front' division (you can use margin-top: -100px or anything on it),
And use mouseout, on mouseout put the '#front' division on its original position(margin-top: 0px)
$('#card1').on('mouseenter',function(){ $('#front').css('margin-top','-100px') }).on('mouseout',function(){ $('#front').css('margin-top','0') })
I've done it (basic implementation without any animation and stuff) using jquery.
Do leave a comment if its not clear to you.
Thanks
solution2
0 ACCPTED 2017-10-17 04:10:34
I hope my answser will help u !
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .cards { position: relative; } #front { position: absolute; left: 50px; z-index: 2; background-color: red; color: white; height: 200px; width: 200px; border-radius: 5px; } #back { position: absolute; left: 50px; z-index: 1; height: 200px; width: 200px; background-color: blue; color: white; border-radius: 5px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div[id="card1"]').on('mouseover', function () { $('div[id="front"]').slideUp(); }); $('div[id="card1"]').on('mouseleave', function () { $('div[id="front"]').slideDown(); }); }); </script> <title></title> </head> <body> <div class="cards" id="card1"> <div id="front"> <div class="caption" style="text-align:center;"> <h6><b>Hello</b></h6> </div> </div> <div id="back"> <div id="buttons"> <button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button> <button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button> <button class="btn btn-primary lis">show message</button> </div> <div id="buttons"> <img id="imagesLg" src="thiser.gif" alt="HelloWorld" /> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.