<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position: relative;
width: 711px;
height: 400px;
border: 4px solid orange;
margin: 0 auto;
}
.son{
top: 0px;
left: 0px;
position: relative;
position: absolute;
width: 711px;
height: 400px;
background-color:rgba( 1,1,1,0.5);
opacity: 0;
}
.son img {
position: absolute;
top: 45% ;
left:45% ;
}
.son:hover{
opacity: 1;
}
</style>
</head>
<body>
<div class="father">
<img src="./sed.jpg">
<div class="son">
<img src="./arr.png">
</div>
</div>
</body>
</html>