html - 悬停时反转显示文本的图像

Question

我想做的是反转这段代码，而不是将鼠标悬停在文本上以显示图像，我想将鼠标悬停在图像上以显示文本。我不确定如何执行此操作，因为我尝试切换缓入和缓出但没有奏效。

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: 370px;  
  font-size: 15px;
  padding: 10px;
  color: black;
  margin-top: -395px;
}

text {
  font-size:10px;
  transition:font-size .4s ease-out;
  font-weight:900;
  font-family:arial;
}

.texts {
  font-size:12px;
  font-family:arial;
  margin: 30px 0px 0px 0px;
}

svg:hover text{
  transition:font-size .4s ease-in;
  font-size: 600px;
}

<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"/>
<h5>text here</h5>
</svg>
</div>

Answer 1

只需在正常和悬停状态之间切换 font-size 值:

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: 370px;  
  font-size: 15px;
  padding: 10px;
  color: black;
  margin-top: -395px;
}

text {
  font-size:600px;
  transition:font-size .4s ease-out;
  font-weight:900;
  font-family:arial;
}

.texts {
  font-size:12px;
  font-family:arial;
  margin: 30px 0px 0px 0px;
}

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"/>
<h5>text here</h5>
</svg>