Suppose I have an image. I want to display an div on the image with same width and same height of the image when I put the cursor on the image. Background of the div will be black included with opacity .6. AT first Below I included an code, but it is not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.under_menu{
width: 400px;
height: 400px;
background-color: black;
opacity: .5;
position: absolute;
display: none;
}
.image:hover .under_menu{
display: block;
margin-top: -20px;
}
.main_menu{
position: relative;
display: inline-block;
}
</style>
</head>`
<body>
<div class="main_menu">
<img src="com22.jpg" class="image" width="400" height="400" alt="" />
<div class="under_menu"></div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire