<!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>