文字要素の多いMVに隠しテキストを仕込む方法

文字要素が多いMV（メインビジュアル）にaltで長い文章を入れるのはちょっと…ってことありますよね。ビジュアル面だけでなく伝えるべき内容が画像内に含まれている場合は特に、情報はテキストとして認識させたいものです。そんな時に使えるテクニック。
ただし、この方法は乱用するとスパム認定される可能性があるため、あまり推奨されるものではない点ご注意を！

.mv {
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   margin: 0;
   border: 0;
   padding-top: calc(画像高さ / 画像横幅 * 100%);
   background: url(../hoge.jpg)  contain no-repeat;
}

MV自体を背景画像として設定します。ここで、background-size:contain; を指定しておくと、レスポンシブ対応可能です。
あとは、設定したブロック内にテキスト要素を流し込めばOK。

<div class="mv">
       <p>ここにテキスト情報を入れます</p>
       <p>ここにテキスト情報を入れます</p>
</div>