How to make text slide up and down using jquery and css3

Manideepgoud
Posted by Manideepgoud under CSS 3 category on | Points: 40 | Views : 408
<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#text {
margin-top: 20px;
float: center;
font: VNF-Museo;
font-size: 40px;
color: #333;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
}

#video {
display: none;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 89%;
font-size: 14px;
padding: 10px;
background-color: black;
position: absolute;
top: 11%;
height: 140px;
overflow: hidden;
}
</style>

</head>

<body>
<br>
<br>
<div class="container">
<div class="col-xl-12">
<div class="row">
<div class="col-xl-3 subclasses">
<div id="wrap">
<div id="text">
<img src="D:/Manideep/Images/Devops_testing.jpg" style="width:100%;" />
<h3 style="background-color:black;color:white;font-size:20px;text-align:center;margin:0px;">Devops Testing</h3>
</div>
<div id="video">
<p style="color:white;background-color:black;" class="myclass">IIHT delivers conventional style classroom training, one of the most powerful ways of learning - a combination of real-time interactions, classroom discussions, and individual attention</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#wrap").mouseover(function() {
$("#video").stop().slideDown("slow");
});
$("#wrap").mouseout(function() {
$("#video").slideUp("slow");
});
});
</script>
</body>

</html>

Comments or Responses

Posted by: Jhonsonrock01 on: 9/13/2019 Level:Starter | Status: [Member] | Points: 10
If you are not able to manage your business manually then you can use this automatic tool where you have to insert the input and you will get your desired output. you can have used Quickbooks Payroll to pay your vendors and owners. you can also get Customer Support from [url=https://enterprisesupport.co/]Quickbooks Enterprise Support Number. [/url]

Login to post response