バナーボタンの一部をテキストで上書きするCSS

バナーボタン画像の一部をテキストで上書きするCSSを自動生成できます。
バナー画像の画像入れ替えは多くでありますが、画像はサイズが大きく重いバナーとなります。また、書き換えも容易とはなりません。
一部をテキストで書き換える（上書き）することで、軽く・ユーザ毎にテキスト変更などの対応も可能となります。
当ページでは、簡単操作でCSSなどの自動生成が可能です。

この生成では、マウスオーバー時にテキスト上書きしています。定期的に画像とテキストを入れ替えする場合は、下記のサンプルをご確認ください。

万が一の備は
顧客満足度
No.1
ＸＸＸ保険へ

<div class="buttonArea" id='makeImg' onclick="alert('Click!')">
  <img src="car.png" style="width:148px;width:100%;vertical-align:bottom;" alt="サンプル画像">
   <div>万が一の備は<br>顧客満足度<br>No.1<br>ＸＸＸ保険へ</div>
</div>

<style type="text/css">
/* --- ボタンを表示する親要素 ------------------------------ */
.buttonArea {
  position      : relative;
  display       : inline-block;
  border        : 2px solid #005390; /* 全体に枠を付ける     */
  background    : #005390;           /* 背景を枠色と合わせる */
  overflow      : hidden;            /* はみ出し範囲は非表示 */
  cursor        : pointer;           /* カーソル形状         */
  border-radius : 5px;               /* 角丸                 */
}
/* --- 親要素にマウスオーバー時に文字を表示する ------------ */
.buttonArea:hover > div {
  left          : 0;                 /* 親要素の左端に移動   */
  bottom        : 0;                 /* 親要素の下端に移動   */
}
/* --- マウスオーバー時に表示される文字の要素 -------------- */
.buttonArea > div {
  position      : absolute;
  left          : -100%;             /* 見えない左に移動     */
  bottom        : 0;                 /* 親要素の下に合わせる */
  transition    : .5s;               /* 変化時間             */
  box-sizing    : border-box;        /* 余白・罫線を含める   */
  width         : 100%;              /* 親要素の幅に合わせる */
  height        : 92px;              /* 文字要素の高さ       */
  color         : red;               /* 文字色               */
  background    : #fff;              /* 背景色               */
  text-align    : center;            /* 文字位置             */
  font-size     : 12pt;              /* 文字サイズ           */
  font-weight   : bold;              /* 太字                 */
  line-height   : 1.2;               /* 1行の高さ            */
  padding-top   : 8px;
}
</style>

CSSの「animation」を使用することで、色々なスクロールを作成することができます。

バナーの一部を定期的にテキストに入れ替える

万が一の備は
顧客満足度
No.1
ＸＸＸ保険へ

<div class="sample1" onclick="alert('Click!')">
  <img src="car.png" style="width:148px;width:100%;vertical-align:bottom;" alt="サンプル画像">
   <div>万が一の備は<br>顧客満足度<br>No.1<br>ＸＸＸ保険へ</div>
</div>

<style type="text/css">
/* --- ボタンを表示する親要素 ------------------------------ */
.sample1 {
  position      : relative;
  display       : inline-block;
  border        : 2px solid #005390; /* 全体に枠を付ける     */
  background    : #005390;           /* 背景を枠色と合わせる */
  overflow      : hidden;            /* はみ出し範囲は非表示 */
  cursor        : pointer;           /* カーソル形状         */
  border-radius : 5px;               /* 角丸                 */
}
/* --- マウスオーバー時に表示される文字の要素 -------------- */
.sample1 > div {
  position      : absolute;
  left          : 0;                 /* 親要素の左に合わせる */
  bottom        : 0;                 /* 親要素の下に合わせる */
  opacity       : 0;                 /* 透明(フェードイン)   */
  box-sizing    : border-box;        /* 余白・罫線を含める   */
  width         : 100%;              /* 親要素の幅に合わせる */
  height        : 92px;              /* 文字要素の高さ       */
  color         : red;               /* 文字色               */
  background    : #fff;              /* 背景色               */
  text-align    : center;            /* 文字位置             */
  font-size     : 12pt;              /* 文字サイズ           */
  font-weight   : bold;              /* 太字                 */
  line-height   : 1.2;               /* 1行の高さ            */
  padding-top   : 8px;
  animation   : sample1Anime 5s infinite alternate;
}
@keyframes sample1Anime {
    0% { opacity : 0 }
   40% { opacity : 0 }
   60% { opacity : 1 }
  100% { opacity : 1 }
}
</style>