cssの部分的なローディングについて

Question

前提・実現したいこと

ローディング時にdiv要素に半透明の白でもともとの要素（テキストや画像）に重ねて
その上にローディングのアニメーションを載せたいです。

該当のソースコード

https://jsfiddle.net/qo3rp4v6/29/

試したこと

・backgroundのを指定しても画像やテキストの後ろに色がつくだけでした。
・opcityを指定しましたがローディングのアニメーションまで透過してしまいます。
・rgbaを使用して見ましたがbackgroundと同じく画像やテキストの後ろに色がつくだけでした。
・アニメーションのdivと画像のdivの間に新しいdivを作り、backgroundで色を指定して見たのですが、画像やテキストは隠れますがwidthなどで大きさを指定したいといけないため、この大きさ以外で色々な箇所でローディングを使用したいため使えないです。
・プラグインなどは使わないで実現したいです。

解決策はありますでしょうか？
ご教示のとど宜しくお願いします。

Answer 1

全体を囲うdivを増やしてその中に新しいdivを作ることで解決しました。