講座2

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

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

次は、画像の上に画像がピョンッと出るHTMLとCSSを使ってする方法をします。

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

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

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

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

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

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

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

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

<div class="g-pyon-gazou1">
ここに画像1を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像2を入れる
      </div>
    </div>
</div>

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

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

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*画像の上に画像がピョンッと出る（基本）*/
.g-pyon-gazou1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou1 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou1 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou1 .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-gazou1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou1">
ここに画像1を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像2を入れる
      </div>
    </div>
</div>

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

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

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

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

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

「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;」は、半透明の背景の透明度を設定するコードです。

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

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

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

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

CSS

/*画像の上に画像がピョンッと出る（基本）*/
.g-pyon-gazou1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou1 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou1 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou1 .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-gazou1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou1">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（枠線付き）*/
.g-pyon-gazou2 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
  border: solid 5px black; /*枠線*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou2 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou2 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  border: solid 5px white; /*枠線*/
}
/*半透明の背景設定*/
.g-pyon-gazou2 .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-gazou2:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou2">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（枠付き）*/
.g-pyon-gazou3 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
  margin: auto; /*枠の中央にする設定*/
}
/*枠の設定*/
.g-pyon-gazou3-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 600px; /*枠の横幅*/
  height: 400px; /*枠の高さ*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou3 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou3 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou3 .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-gazou3:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou3 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou3-waku">
  <div class="g-pyon-gazou3">
ここに画像を入れる
      <div class="haikei">
        <div class="gazou">
ここに画像を入れる
        </div>
      </div>
  </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（文字と枠付き）*/
.g-pyon-gazou4 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
  margin: auto; /*枠の中央にする設定*/
}
/*文字の設定*/
.g-pyon-gazou4-mozi {
  font-size:  1.5em; /* 文字の大きさ*/
  text-align: center; /*文字の位置*/
  font-weight: bold; /*太さ*/
}
/*文書の設定*/
.g-pyon-gazou4-bunsho {
  font-size:  1.2em; /* 文字の大きさ*/
  text-align: left; /*文字の位置*/
  padding-top: 20px; /*文字の上側の余白*/
  padding-left: 70px; /*文字の左側余白*/
  padding-right: 70px; /*文字の右側余白*/
  padding-bottom: 20px; /*文字の下側の余白*/
}
/*枠の設定*/
.g-pyon-gazou4-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 600px; /*枠の横幅*/
  height: auto; /*枠の高さ*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou4 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou4 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou4 .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-gazou4:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou4 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou4-waku">
  <div class="g-pyon-gazou4-mozi">ここに文字を入れる</div>
  <div class="g-pyon-gazou4">
ここに画像を入れる
      <div class="haikei">
        <div class="gazou">
ここに画像を入れる
        </div>
      </div>
  </div>
  <div class="g-pyon-gazou4-bunsho">ここに文章を入れる</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ここに文字を入れる

ここに文章を入れる

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

CSS

/*画像の上に画像がピョンッと出る（リンク付き）*/
.g-pyon-gazou5 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou5 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou5 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou5 .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-gazou5:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-gazou5 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

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

「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


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

CSS

/*画像の上に画像がピョンッと出る（上からスライド）*/
.g-pyon-gazou6 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou6 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou6 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou6 .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-gazou6:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-gazou6 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou6">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（下からスライド）*/
.g-pyon-gazou7 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou7 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou7 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou7 .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-gazou7:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-gazou7 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou7">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（左からスライド）*/
.g-pyon-gazou8 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou8 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou8 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou8 .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-gazou8:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-gazou8 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou8">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（右からスライド）*/
.g-pyon-gazou9 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou9 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou9 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou9 .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-gazou9:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-gazou9 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou9">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（画像が大きくなる）*/
.g-pyon-gazou10 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou10 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou10 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou10 .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-gazou10:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1.5); /*画像を大きくする*/
  -webkit-transform: scale(1.5); /*画像を大きくする*/
  transform: scale(1.5); /*画像を大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-gazou10 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou10">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（中心から大きくなる）*/
.g-pyon-gazou11 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou11 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou11 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou11 .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-gazou11:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1); /*画像を大きくする*/
  -webkit-transform: scale(1); /*画像を大きくする*/
  transform: scale(1); /*画像を大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-mozi11 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou11">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（縦回転）*/
.g-pyon-gazou12 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou12 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou12 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou12 .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-gazou12:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateX(0deg); /*縦回転*/
  -webkit-transform: rotateX(0deg); /*縦回転*/
  transform: rotateX(0deg); /*縦回転*/
}
/*画像の大きさ設定*/
.g-pyon-gazou12 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou12">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（横回転）*/
.g-pyon-gazou13 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou13 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou13 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou13 .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-gazou13:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateY(0deg); /*横回転*/
  -webkit-transform: rotateY(0deg); /*横回転*/
  transform: rotateY(0deg); /*横回転*/
}
/*画像の大きさ設定*/
.g-pyon-gazou13 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou13">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（回転）*/
.g-pyon-gazou14 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou14 .gazou {
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
  transform: translate(-50%,-50%); /*文字の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou14 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou14 .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-gazou14:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotate(360deg); /回転*/
  -webkit-transform: rotate(360deg); /*回転*/
  transform: rotate(360deg); /*回転*/
}
/*画像の大きさ設定*/
.g-pyon-gazou14 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou14">
ここに画像を入れる
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に画像がピョンッと出る（上から画像が画像を押し出す）*/
.g-pyon-gazou15 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou15 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 0%; /*上側基準*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
  transform: translate(-50%,0%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou15 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou15 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50px; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.9); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou15:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(50px); /*縦方向に移動*/
  -webkit-transform: translateY(50px); /*縦方向に移動*/
  transform: translateY(50px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou15 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou15:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(50px); /*縦方向に移動*/
  -webkit-transform: translateY(50px); /*縦方向に移動*/
  transform: translateY(50px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-gazou15">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

画像の上に画像がピョンッと出る（上から画像が押し出して切り替わる）

CSS

/*画像の上に画像がピョンッと出る（上から画像が押し出して切り替わる）*/
.g-pyon-gazou16 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou16 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 0%; /*上側基準*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
  transform: translate(-50%,0%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou16 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou16 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 0px; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.9); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou16:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(255px); /*縦方向に移動*/
  -webkit-transform: translateY(255px); /*縦方向に移動*/
  transform: translateY(255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou16 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou16:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(100%); /*縦方向に移動*/
  -webkit-transform: translateY(100%); /*縦方向に移動*/
  transform: translateY(100%); /*縦方向に移動*/
}

HTML

<div class="g-pyon-gazou16">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に文字がピョンッと出る（下から画像が画像を押し出す）*/
.g-pyon-gazou17 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou17 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 0%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
  transform: translate(-50%,0%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou17 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou17 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 0px; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  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-gazou17:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-50px); /*縦方向に移動*/
  -webkit-transform: translateY(-50px); /*縦方向に移動*/
  transform: translateY(-50px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou17 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou17:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-50px); /*縦方向に移動*/
  -webkit-transform: translateY(-50px); /*縦方向に移動*/
  transform: translateY(-50px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-gazou17">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

画像の上に画像がピョンッと出る（下から画像が押し出して切り替わる）

CSS

/*画像の上に文字がピョンッと出る（下から画像が押し出して切り替わる）*/
.g-pyon-gazou18 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou18 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: center; /*中央ぞろえ*/
  top: 0%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
  transform: translate(-50%,0%); /*画像の基準位置調整*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou18 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%; /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou18 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 0px; /*半透明の高さ*/
  top: 255px; /*上側の位置*/
  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-gazou18:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-255px); /*縦方向に移動*/
  -webkit-transform: translateY(-255px); /*縦方向に移動*/
  transform: translateY(-255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou18 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*文字が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*文字が表示されるまでの時間*/
  transition: all 1s ease; /*文字が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou18:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-100%); /*縦方向に移動*/
  -webkit-transform: translateY(-100%); /*縦方向に移動*/
  transform: translateY(-100%); /*縦方向に移動*/
}

HTML

<div class="g-pyon-gazou18">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に文字がピョンッと出る（左から画像が画像を押し出す）*/
.g-pyon-gazou19 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou19 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像横幅*/
  height: 255px; /*画像縦幅*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: right; /*右ぞろえ*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou19 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%;  /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou19 .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-gazou19:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(34%); /*横方向に移動*/
  -webkit-transform: translateX(34%); /*横方向に移動*/
  transform: translateX(34%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou19 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou19:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(34%); /*横方向に移動*/
  -webkit-transform: translateX(34%); /*横方向に移動*/
  transform: translateX(34%); /*横方向に移動*/
}

HTML

<div class="g-pyon-gazou19">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

画像の上に画像がピョンッと出る（左から画像が押し出して切り替わる）

CSS

/*画像の上に文字がピョンッと出る（左から画像が押し出して切り替わる）*/
.g-pyon-gazou20 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou20 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像横幅*/
  height: 255px; /*画像縦幅*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: right; /*右ぞろえ*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou20 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%;  /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou20 .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-gazou20:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou20 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou20:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-gazou20">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に文字がピョンッと出る（右から画像が画像を押し出す）*/
.g-pyon-gazou21 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou21 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像横幅*/
  height: 255px; /*画像縦幅*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: left; /*左ぞろえ*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou21 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%;  /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou21 .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-gazou21:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-34%); /*横方向に移動*/
  -webkit-transform: translateX(-34%); /*横方向に移動*/
  transform: translateX(-34%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou21 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou21:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-34%); /*横方向に移動*/
  -webkit-transform: translateX(-34%); /*横方向に移動*/
  transform: translateX(-34%); /*横方向に移動*/
}

HTML

<div class="g-pyon-gazou21">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

画像の上に画像がピョンッと出る（右から画像が押し出して切り替わる）

CSS

/*画像の上に文字がピョンッと出る（右から画像が押し出して切り替わる）*/
.g-pyon-gazou22 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou22 .gazou {
  position: absolute; /*絶対配置*/
  width: 450px; /*画像横幅*/
  height: 255px; /*画像縦幅*/
  display: flex; /*中央ぞろえ*/
  align-items: center; /*中央ぞろえ*/
  justify-content: left; /*左ぞろえ*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou22 .gazou img{
  width: 100%; /*画像の横幅*/
  height: 100%;  /*画像の高さ*/
}
/*半透明の背景設定*/
.g-pyon-gazou22 .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-gazou22:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-gazou22 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*画像が表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*画像が表示されるまでの時間*/
  transition: all 1s ease; /*画像が表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-gazou22:hover .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-gazou22">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei">
      <div class="gazou">
ここに画像を入れる
      </div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に文字がピョンッと出る（上下スライド）*/
.g-pyon-gazou23 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou23 .gazou img{
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
  visibility: hidden;	/* 画像を表示しない */
  opacity: 0; /* 画像非表示 */
  -ms-transition: visibility 1s step-end; /*画像表示時間*/
  -webkit-transition: visibility 1s step-end; /*画像表示時間*/
  transition: visibility 1s step-end; /*画像表示時間*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou23 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px;  /*画像の高さ*/
}
/*画像表示用*/
.g-pyon-gazou23:hover .gazou img{
  visibility: visible; /* 画像表示 */
  opacity: 1; /* 画像表示 */
}
/*半透明の背景設定*/
.g-pyon-gazou23 .haikei1, .g-pyon-gazou23 .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-gazou23 .haikei1 {
  top: -50%; /* 枠の上に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou23:hover .haikei1 {
  top: 0px; /* 下へスライド */
}
/*下側スライド*/
.g-pyon-gazou23 .haikei2 {
  bottom:	 -50%; /* 枠の下に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou23:hover .haikei2 {
  bottom:	 0px; /* 上へスライド */
}
/*画像の大きさ設定*/
.g-pyon-gazou23 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou23">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei1"></div>
    <div class="haikei2"></div>
  <div class="gazou">
ここに画像を入れる
  </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

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

CSS

/*画像の上に文字がピョンッと出る（左右スライド）*/
.g-pyon-gazou24 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*ピョンっと出る画像の設定*/
.g-pyon-gazou24 .gazou img{
  position: absolute; /*絶対配置*/
  width: 200px; /*画像の横幅*/
  height: 150px; /*画像の高さ*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
  transform: translate(-50%,-50%); /*画像の基準位置調整*/
  visibility: hidden;	/* 画像を表示しない */
  opacity: 0; /* 画像非表示 */
  -ms-transition: visibility 1s step-end; /*画像表示時間*/
  -webkit-transition: visibility 1s step-end; /*画像表示時間*/
  transition: visibility 1s step-end; /*画像表示時間*/
}
/*ピョンっと出る画像の大きさ設定*/
.g-pyon-gazou24 .gazou img{
  width: 200px; /*画像の横幅*/
  height: 150px;  /*画像の高さ*/
}
/*画像表示用*/
.g-pyon-gazou24:hover .gazou img{
  visibility: visible; /* 画像表示 */
  opacity: 1; /* 画像表示 */
}
/*半透明の背景設定*/
.g-pyon-gazou24 .haikei1, .g-pyon-gazou24 .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-gazou24 .haikei1 {
  left: -50%; /* 枠の左に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou24:hover .haikei1 {
  left: 0px; /* 右へスライド */
}
/*右側スライド*/
.g-pyon-gazou24 .haikei2 {
  right: -50%; /* 枠の右に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-gazou24:hover .haikei2 {
  right: 0px; /* 左へスライド */
}
/*画像の大きさ設定*/
.g-pyon-gazou24 .gazou2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-gazou24">
  <div class="gazou2">
ここに画像を入れる
  </div>
    <div class="haikei1"></div>
    <div class="haikei2"></div>
  <div class="gazou">
ここに画像を入れる
  </div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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