Text fade in with SVG - html

Question

What I want to happen is when you roll over the image, the vector shows up but I also want text to show up as well. Right now, the text is there but it's consistently there. I only want it to appear when you hover over the image.
svg{
background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
background-size:cover;
width:40vmin; height:auto;
display:block;
}
h5 {
height: auto;
width: 280px;
padding: 10px;
color: white;
margin-top: -105px;
font-size: 15px;
}
text {
font-size:350px;
transition:font-size .4s ease-out;
font-weight:900;
font-family:arial;
}
svg:hover text{
transition:font-size .4s ease-in;
font-size: 10px;
}
<svg viewbox="0 0 50 50" width="50" height="50">
<defs>
<mask id="mask" x="0" y="0" width="100" height="49">
<rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
<text x="18" text-anchor="middle" y="50" dy="0">D</text>
<text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">A</text>
<text x="28" text-anchor="middle" y="50" dy="0">R</text>
<text x="33" text-anchor="middle" y="50" dy="0">K</text>
</mask>
</defs>
<rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0"/>
<div id="overlay">
<h5><center>text</center></h5>
</svg>

Answer 1

Here is the fiddle to solve your problem.
Solution fiddle link
Further I'd like to inform you that, in your layout you have put HTML div tag inside SVG tag, which is not a good approach. Even in must have case, you should add HTML tags inside SVG using foreignObject element. Please refer this link for more info on this :https://bl.ocks.org/Jverma/2385cb7794d18c51e3ab
What I did is put this code outside SVG and gave it opacity 0:
<div id="overlay">
<h5><center>text</center></h5>
</div>
And making opacity 1 on hover using this code:
svg:hover ~ #overlay {
transition: opacity .7s ease-in;
opacity: 1;
}