How to make this caption hover work with a fluic width/height box?

HTML & CSS
1

So i have an IMG that i want to have a full cover caption on when hovering and my code looks like this ATM:

<div class="box">
   <img src="#" />
   <span class="caption">hello</span>
</div>

.box{
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
}

img{
position: absolute;
left: 0;
height: 200px;
width: 200px;
}

.caption{
position: absolute;
opacity: 0;
background: #000;
height: 200px;
width: 200px;
}

.caption:hover{
opacity: 0.7;
}

And this is working, but the thing is i dont want the widht and height to be static, i want it to depend on the size of the image, and the img actual size is % based as it is a responsive design. Maby its easy but my brain doesnt seem to work atm.

2

You could try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.box{
position: relative;
overflow: hidden;
width: 30%;
}
 
img{
width: 100%;
height: 100%;
}
 
.caption{
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #000;
height: 100%;
width: 100%;
color: red;
display: block; 
text-align: center;
font-size: 3em;
}
 
.caption:hover{
opacity: 0.7;
}
</style>
	
</head>
<body>

<div class="box">
   <img src="image.gif">
   <span class="caption">hello</span>
</div>

</body>
</html>