画像の上に文字がピョンッと出るHTMLとCSSを使ってする方法

2021年04月09日 2021年04月13日

Jo Masafumi

学習状況をツイッターでつぶやく

次は、画像の上にマウスの矢印をのせると文字がピョンッと出るHTMLとCSSを使ってする方法をします。

画像の上に文字がピョンッと出るHTMLとCSSを使ってする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「画像の上に文字がピョンッと出るHTMLとCSSを使ってする方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<div class="g-pyon-mozi1">
ここに画像を入れる
    <div class="haikei">
      <div class="mozi">続きを読む</div>
    </div>
</div>

貼り付けました。

「ここに画像を入れる」の文字を消します。

文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。

左上の「メディアライブラリ」を押します。

①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「画像の上に文字がピョンッと出るHTMLとCSSを使ってする方法」の
画像の上にマウスの矢印をのせると文字がピョンッと出ることを確認します。

学習状況をツイッターでつぶやく

↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*画像の上に文字がピョンッと出る（基本）*/
.g-pyon-mozi1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi1 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi1 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi1">
ここに画像を入れる
    <div class="haikei">
      <div class="mozi">続きを読む</div>
    </div>
</div>

「position: relative;」は、画像を親要素として設定するためのCSSコードです。

「width」の、「450px」の数字が大きくなるほど画像の横幅が大きくなります。

「height」の、「255px」の数字が大きくなるほど画像の高さが大きくなります。

「overflow: hidden;」は、はみだした半透明の背景を非表示にするためのコードです。

「position: absolute;」は、文字を子要素として設定するためのCSSコードです。

「font-size: 1.5em;」は、文字の大きさを設定するコードです。

「color: #fff;」は、文字の色を設定するコードです。

「top: 50%;」は、画像の上側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。

「left: 50%;」は、画像の左側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。

「-ms-transform: translate(-50%,-50%);」は、文字の基準位置を変更するコードです。

「-ms-transform」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。

「-webkit-transform: translate(-50%,-50%);」は、文字の基準位置を変更するコードです。

「-webkit-transform」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。

「transform: translate(-50%,-50%);」は、文字の基準位置を変更するコードです。

「background-color: rgba(0,0,0,0.4);」は、半透明の背景の色と透明度を設定するコードです。

「transition: all 0.2s ease;」は、文字が表示されるまでの時間を設定するためのCSSコードです。

「all」は、すべてのトランジションを適用するときに設定します。

「0.2s」は、変化する時間が0.2秒という意味です。

「ease」は、変化するときの開始と終わりがゆるやかに変化します。

「opacity: 0;」は、半透明の背景の透明度を設定するコードです。

「ここに画像のURLを入れます」の文字を消して、画像のURLを入れます。

画像の上に文字がピョンッと出る記入例

画像の上に文字がピョンッと出る（基本）

CSS

/*画像の上に文字がピョンッと出る（基本）*/
.g-pyon-mozi1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi1 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi1 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi1">
ここに画像を入れる
    <div class="haikei">
      <div class="mozi">続きを読む</div>
    </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（太字）

CSS

/*画像の上に文字がピョンッと出る（太字）*/
.g-pyon-mozi2 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi2 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi2 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi2:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi2">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（色付き）

CSS

/*画像の上に文字がピョンッと出る（色付き）*/
.g-pyon-mozi3 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi3 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi3 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(255,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi3:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi3 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi3">
ここに画像を入れる
    <div class="haikei">
      <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（リンク付き）

CSS

/*画像の上に文字がピョンッと出る（リンク付き）*/
.g-pyon-mozi4 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi4 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi4 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi4:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi4 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi4">
ここに画像を入れる
  <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank">
    <div class="haikei">
      <div class="mozi">続きを読む</div>
    </div>
  </a>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（大きい文字）

CSS

/*画像の上に文字がピョンッと出る（大きい文字）*/
.g-pyon-mozi5 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi5 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 2em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi5 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi5:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi5 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi5">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（下線付き）

CSS

/*画像の上に文字がピョンッと出る（下線付き）*/
.g-pyon-mozi6 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi6 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  text-decoration: underline; /*下線*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*半透明の背景設定*/
.g-pyon-mozi6 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi6:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi6 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi6">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（マーカー付き）

CSS

/*画像の上に文字がピョンッと出る（マーカー付き）*/
.g-pyon-mozi7 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi7 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  background: linear-gradient(transparent 0%, red 80%); /*マーカー色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi7 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi7:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi7 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi7">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（背景付き）

CSS

/*画像の上に文字がピョンッと出る（背景付き）*/
.g-pyon-mozi8 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi8 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  background: linear-gradient(transparent 0%, black 0%); /*背景色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi8 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -webkit-transition: all 0.2s ease; /*文字が表示されるまでの時間*/
  transition: all 0.2s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi8:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-mozi8 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi8">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（上からスライド）

CSS

/*画像の上に文字がピョンッと出る（上からスライド）*/
.g-pyon-mozi9 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi9 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi9 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi9:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi9 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi9">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（下からスライド）

CSS

/*画像の上に文字がピョンッと出る（下からスライド）*/
.g-pyon-mozi10 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi10 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi10 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi10:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi10 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi10">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（左からスライド）

CSS

/*画像の上に文字がピョンッと出る（左からスライド）*/
.g-pyon-mozi11 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi11 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi11 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi11:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi11 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi11">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（右からスライド）

CSS

/*画像の上に文字がピョンッと出る（右からスライド）*/
.g-pyon-mozi12 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi12 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi12 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi12:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi12 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi12">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（文字が大きくなる）

CSS

/*画像の上に文字がピョンッと出る（文字が大きくなる）*/
.g-pyon-mozi13 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi13 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi13 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi13:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(2); /*文字を大きくする*/
  -webkit-transform: scale(2); /*文字を大きくする*/
  transform: scale(2); /*文字を大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-mozi13 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi13">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（中心から大きくなる）

CSS

/*画像の上に文字がピョンッと出る（中心から大きくなる）*/
.g-pyon-mozi14 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi14 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi14 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  transition: all 0.5s ease; /*文字が表示されるまでの時間*/
  -ms-transform: scale(0); /*文字を大きくする*/
  -webkit-transform: scale(0); /*文字を大きくする*/
  transform: scale(0); /*文字を大きくする*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi14:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1); /*文字を大きくする*/
  -webkit-transform: scale(1); /*文字を大きくする*/
  transform: scale(1); /*文字を大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-mozi14 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi14">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（縦回転）

CSS

/*画像の上に文字がピョンッと出る（縦回転）*/
.g-pyon-mozi15 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi15 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi15 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
  -ms-transform: rotateX(180deg); /*縦回転*/
  -webkit-transform: rotateX(180deg); /*縦回転*/
  transform: rotateX(180deg); /*縦回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi15:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateX(0deg); /*縦回転*/
  -webkit-transform: rotateX(0deg); /*縦回転*/
  transform: rotateX(0deg); /*縦回転*/
}
/*画像の大きさ設定*/
.g-pyon-mozi15 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi15">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（横回転）

CSS

/*画像の上に文字がピョンッと出る（横回転）*/
.g-pyon-mozi16 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi16 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi16 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
  -ms-transform: rotateY(180deg); /*横回転*/
  -webkit-transform: rotateY(180deg); /*横回転*/
  transform: rotateY(180deg); /*横回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi16:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateY(0deg); /*横回転*/
  -webkit-transform: rotateY(0deg); /*横回転*/
  transform: rotateY(0deg); /*横回転*/
}
/*画像の大きさ設定*/
.g-pyon-mozi16 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi16">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（回転）

CSS

/*画像の上に文字がピョンッと出る（回転）*/
.g-pyon-mozi17 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi17 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
}
/*半透明の背景設定*/
.g-pyon-mozi17 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 0; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
  -ms-transform: rotate(0deg); /*回転*/
  -webkit-transform: rotate(0deg); /*回転*/
  transform: rotate(0deg); /*回転*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi17:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotate(360deg); /回転*/
  -webkit-transform: rotate(360deg); /*回転*/
  transform: rotate(360deg); /*回転*/
}
/*画像の大きさ設定*/
.g-pyon-mozi17 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi17">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（上から文字が画像を押し出す）

CSS

/*画像の上に文字がピョンッと出る（上から文字が画像を押し出す）*/
.g-pyon-mozi18 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi18 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  width: 100%; /*背景横幅*/
}
/*半透明の背景設定*/
.g-pyon-mozi18 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50px; /*半透明の高さ*/
  top: -50px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi18:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi18 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-mozi18:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  margin-top: 50px; /*画像の下がり距離*/
}

HTML

<div class="g-pyon-mozi18">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（下から文字が画像を押し出す）

CSS

/*画像の上に文字がピョンッと出る（下から文字が画像を押し出す）*/
.g-pyon-mozi19 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi19 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  height: 50px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  width: 100%; /*背景横幅*/
}
/*半透明の背景設定*/
.g-pyon-mozi19 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50px; /*半透明の高さ*/
  bottom: -50px; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi19:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  bottom: 0px; /*下側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi19 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-mozi19:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  margin-top: -50px; /*画像の上がり距離*/
}

HTML

<div class="g-pyon-mozi19">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（左から文字が画像を押し出す）

CSS

/*画像の上に文字がピョンッと出る（左から文字が画像を押し出す）*/
.g-pyon-mozi20 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi20 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: right; /*右ぞろえ*/
  height: 225px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  padding-right: 15px; /*文字の右側余白*/
  height: 100%; /*背景縦幅*/
  width: 100%; /*背景横幅*/
}
/*半透明の背景設定*/
.g-pyon-mozi20 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0px; /*上側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi20:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: -65%; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi20 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-mozi20:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(34%); /*横方向に移動*/
  -webkit-transform: translateX(34%); /*横方向に移動*/
  transform: translateX(34%); /*横方向に移動*/
}

HTML

<div class="g-pyon-mozi20">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（右から文字が画像を押し出す）

CSS

/*画像の上に文字がピョンッと出る（右から文字が画像を押し出す）*/
.g-pyon-mozi21 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi21 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  font-weight: bold; /*太字*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: left; /*左ぞろえ*/
  height: 225px; /*文字の背景高さ*/
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  padding-left: 20px; /*文字の左側余白*/
  height: 100%; /*背景縦幅*/
  width: 100%; /*背景横幅*/
}
/*半透明の背景設定*/
.g-pyon-mozi21 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0px; /*上側の位置*/
  right: -100%; /*右側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi21:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  right: -65%; /*右側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-mozi21 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-mozi21:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-34%); /*横方向に移動*/
  -webkit-transform: translateX(-34%); /*横方向に移動*/
  transform: translateX(-34%); /*横方向に移動*/
}

HTML

<div class="g-pyon-mozi21">
ここに画像を入れる
  <div class="haikei">
    <div class="mozi">続きを読む</div>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（上下スライド）

CSS

/*画像の上に文字がピョンッと出る（上下スライド）*/
.g-pyon-mozi22 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi22 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  visibility: hidden;	/* 文字を表示しない */
  -ms-transition: all 1s step-end; /*文字表示時間*/
  -webkit-transition: all 1s step-end; /*文字表示時間*/
  transition: all 1s step-end; /*文字表示時間*/
}
/*文字表示用*/
.g-pyon-mozi22:hover .mozi {
  visibility: visible; /* 文字表示 */
}
/*文字非表示用*/
.g-pyon-mozi22 .mozi p {
  color: #fff; /*文字色*/
  opacity: 0; /* 文字非表示 */
}
/*マウスを画像の上にのせたとき（文字表示用）*/
.g-pyon-mozi22:hover .mozi p {
  opacity: 1; /* 文字表示 */
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
  font-weight: bold; /*太字*/
}
/*半透明の背景設定*/
.g-pyon-mozi22 .haikei1, .g-pyon-mozi22 .haikei2{
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50%; /*半透明の高さ*/
  left: 0px; /*左側の位置*/
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*上側スライド*/
.g-pyon-mozi22 .haikei1 {
  top: -50%; /* 枠の上に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi22:hover .haikei1 {
  top: 0px; /* 下へスライド */
}
/*下側スライド*/
.g-pyon-mozi22 .haikei2 {
  bottom:	 -50%; /* 枠の下に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi22:hover .haikei2 {
  bottom:	 0px; /* 上へスライド */
}
/*画像の大きさ設定*/
.g-pyon-mozi22 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi22">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <div class="mozi">
  <p>続きを読む</p>
  </div>
</div>

記事をプレビュー表示したとき

画像の上に文字がピョンッと出る（左右スライド）

CSS

/*画像の上に文字がピョンッと出る（左右スライド）*/
.g-pyon-mozi23 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-mozi23 .mozi {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #fff; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
  visibility: hidden;	/* 文字を表示しない */
  -ms-transition:	all 1s step-end; /*文字表示時間*/
  -webkit-transition:	all 1s step-end; /*文字表示時間*/
	transition:	all 1s step-end; /*文字表示時間*/
}
/*文字表示用*/
.g-pyon-mozi23:hover .mozi {
  visibility: visible; /* 文字表示 */
}
/*文字非表示用*/
.g-pyon-mozi23 .mozi p {
  color: #fff; /*文字色*/
  opacity: 0; /* 文字非表示 */
}
/*マウスを画像の上にのせたとき（文字表示用）*/
.g-pyon-mozi23:hover .mozi p {
  opacity: 1; /* 文字表示 */
  background-color: rgba(0,0,0,1); /* 半透明の背景設定 */
  padding-left: 20px; /*左側の余白*/
  padding-right: 20px; /*右側の余白*/
  font-weight: bold; /*太字*/
}
/*半透明の背景設定*/
.g-pyon-mozi23 .haikei1, .g-pyon-mozi23 .haikei2{
  position: absolute; /*絶対配置*/
  width: 50%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 0px; /*上側の位置*/
  background-color: rgba(0,0,0,0.4); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*左側スライド*/
.g-pyon-mozi23 .haikei1 {
  left: -50%; /* 枠の左に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi23:hover .haikei1 {
  left: 0px; /* 右へスライド */
}
/*右側スライド*/
.g-pyon-mozi23 .haikei2 {
  right: -50%; /* 枠の右に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-mozi23:hover .haikei2 {
  right: 0px; /* 左へスライド */
}
/*画像の大きさ設定*/
.g-pyon-mozi23 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-mozi23">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <div class="mozi">
  <p>続きを読む</p>
  </div>
</div>

記事をプレビュー表示したとき