講座2

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

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

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

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

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

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

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

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

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

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

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

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

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

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

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

HTMLとCSSの説明

CSS

/*画像の上にアイコンがピョンッと出る（基本）*/
.g-pyon-icon1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon1 .icon {
  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-icon1 .icon:before{
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: yellow;/*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon1 .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-icon1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon1">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</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%);」は、文字の基準位置を変更するコードです。

「font-family」は、アイコンのフォントの設定をするCSSコードです。

「content」の、「f013」は、アイコンの種類を設定するCSSコードです。

「f013」を変えると別のアイコンを表示させることができます。

「font-weght」の、「bold」は、太字にするためのCSSコードです。

「padding-right」は、アイコンの右側の余白を設定するCSSコードです。

「color」は、アイコンの色を設定するCSSコードです。

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

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

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

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

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

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

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

アイコンの変更方法

アイコンの変更方法を教えます。

下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/

 

少し下へ移動します。

好きな「アイコン」を押します。

ここの４ケタの「f1b9」をコピーします。

ワードプレスの管理画面を開きます。
左側の「外観」を押します。

左側の「カスタムCSS」を押します。

これをCSSコードの「content」の中に貼り付けます。

一番下の「カスタムCSSの更新」を押します。

左上の「サイトを表示」を押します。

「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。

アイコンが変更されていることを確認します。

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

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

CSS

/*画像の上にアイコンがピョンッと出る（基本）*/
.g-pyon-icon1 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon1 .icon {
  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-icon1 .icon:before{
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: yellow;/*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon1 .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-icon1:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon1 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon1">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

画像の上にアイコンがピョンッと出る（アイコン後ろ）

CSS

/*画像の上にアイコンがピョンッと出る（アイコン後ろ）*/
.g-pyon-icon2 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon2 .icon {
  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-icon2 .icon:after {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f15b"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  padding-left: 5px; /*アイコンの左側の余白*/
  color: yellow;/*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon2 .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-icon2:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon2 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon2">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（枠線付き）*/
.g-pyon-icon3 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon3 .icon {
  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%); /*アイコンの基準位置調整*/
  border: solid 5px white; /*枠線*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon3 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f00c"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: white;/*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon3 .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-icon3:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon3 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon3">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（枠線と色付き）*/
.g-pyon-icon4 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon4 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 5px black; /*枠線*/
  background: yellow; /*背景色*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon4 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f2b6"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon4 .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-icon4:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon4 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon4">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

画像の上にアイコンがピョンッと出る（グラデーション）

CSS

/*画像の上にアイコンがピョンッと出る（グラデーション）*/
.g-pyon-icon5 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon5 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #b6ddff; /*枠線*/
  background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon5 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f0c9"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon5 .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-icon5:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon5 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon5">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

画像の上にアイコンがピョンッと出る（グラデーション影付き）

CSS

/*画像の上にアイコンがピョンッと出る（グラデーション影付き）*/
.g-pyon-icon6 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon6 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #797979; /*枠線*/
  background-image: linear-gradient(#fff 0%, #bbb 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon6 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f02d"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon6 .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-icon6:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon6 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon6">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

画像の上にアイコンがピョンッと出る（アイコンだけリンク付き）

CSS

/*画像の上にアイコンがピョンッと出る（アイコンだけリンク付き）*/
.g-pyon-icon7 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon7 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #ff9f9f; /*枠線*/
  background-image: linear-gradient(#fff 0%, #ffa3a3 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon7 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f001"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon7 .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-icon7:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon7 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon7">
ここに画像を入れる
    <div class="haikei">
      <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank">
      <div class="icon">続きを読む</div>
      </a>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。 「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

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

続きを読む

画像の上にアイコンがピョンッと出る（全体にリンク付き）

CSS

/*画像の上にアイコンがピョンッと出る（全体にリンク付き）*/
.g-pyon-icon8 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon8 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #097900; /*枠線*/
  background-image: linear-gradient(#fff 0%, #00ffab 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon8 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f038"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: orange; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon8 .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-icon8:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
}
/*画像の大きさ設定*/
.g-pyon-icon8 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank">
<div class="g-pyon-icon8">
ここに画像を入れる
    <div class="haikei">      
      <div class="icon">続きを読む</div>
    </div>
</a>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。 「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（上からスライド）*/
.g-pyon-icon9 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon9 .icon {
  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%); /*アイコンの基準位置調整*/
  border: solid 2px #ff8300; /*枠線*/
  background-image: linear-gradient(#ff4800 0%, #2c00ff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon9 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f048"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon9 .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-icon9:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-icon9 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon9">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（下からスライド）*/
.g-pyon-icon10 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon10 .icon {
  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%); /*アイコンの基準位置調整*/
  border: solid 2px #2900bd; /*枠線*/
  background-image: linear-gradient(#3800ff 0%, #00ffcf 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon10 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f042"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon10 .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-icon10:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  top: 0px; /*上側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-icon10 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon10">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（左からスライド）*/
.g-pyon-icon11 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon11 .icon {
  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%); /*アイコンの基準位置調整*/
  border: solid 2px #ff9f9f; /*枠線*/
  background-image: linear-gradient(#ffa700 0%, #f00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon11 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f059"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon11 .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-icon11:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-icon11 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon11">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（右からスライド）*/
.g-pyon-icon12 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon12 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #00c87d; /*枠線*/
  background-image: linear-gradient(#4f0 0%, #ffef00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon12 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f076"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon12 .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-icon12:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-pyon-icon12 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon12">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像のURLを入れます」の文字を消して、画像のURLを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（アイコンが大きくなる）*/
.g-pyon-icon13 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon13 .icon {
  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%); /*アイコンの基準位置調整*/
  border: solid 2px #000; /*枠線*/
  background-image: linear-gradient(#b9b9b9 0%, #000 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon13 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f055"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon13 .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-icon13:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1.5); /*アイコンを大きくする*/
  -webkit-transform: scale(1.5); /*アイコンを大きくする*/
  transform: scale(1.5); /*アイコンを大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-icon13 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon13">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（中心から大きくなる）*/
.g-pyon-icon14 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon14 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: white; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #ff2121; /*枠線*/
  background-image: linear-gradient(#f00 0%, #d3ff00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon14 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f062"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon14 .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-icon14:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: scale(1); /*アイコンを大きくする*/
  -webkit-transform: scale(1); /*アイコンを大きくする*/
  transform: scale(1); /*アイコンを大きくする*/
}
/*画像の大きさ設定*/
.g-pyon-icon14 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon14">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（縦回転）*/
.g-pyon-icon15 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon15 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: black; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #00f3ff; /*枠線*/
  background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon15 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f141"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: blue; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon15 .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-icon15:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateX(0deg); /*縦回転*/
  -webkit-transform: rotateX(0deg); /*縦回転*/
  transform: rotateX(0deg); /*縦回転*/
}
/*画像の大きさ設定*/
.g-pyon-icon15 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon15">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（横回転）*/
.g-pyon-icon16 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon16 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: white; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #30ffe2; /*枠線*/
  background-image: linear-gradient(#9895ff 0%, #6800ff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon16 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f122"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon16 .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-icon16:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotateY(0deg); /*横回転*/
  -webkit-transform: rotateY(0deg); /*横回転*/
  transform: rotateY(0deg); /*横回転*/
}
/*画像の大きさ設定*/
.g-pyon-icon16 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon16">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（回転）*/
.g-pyon-icon17 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon17 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #ff9f9f; /*枠線*/
  background-image: linear-gradient(#fff 0%, #ffc106 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon17 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f242"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: black; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon17 .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-icon17:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: rotate(360deg); /回転*/
  -webkit-transform: rotate(360deg); /*回転*/
  transform: rotate(360deg); /*回転*/
}
/*画像の大きさ設定*/
.g-pyon-icon17 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon17">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（上からアイコンが画像を押し出す）*/
.g-pyon-icon18 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon18 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  bottom: 0%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  border: solid 2px #f00; /*枠線*/
  background-image: linear-gradient(#fff 0%, #fff 100%); /*グラデーション*/
  box-shadow: 5px 0px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon18 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f182"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: red; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon18 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon18:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(65px); /*縦方向に移動*/
  -webkit-transform: translateY(65px); /*縦方向に移動*/
  transform: translateY(65px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon18 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon18:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(65px); /*縦方向に移動*/
  -webkit-transform: translateY(65px); /*縦方向に移動*/
  transform: translateY(65px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-icon18">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（上からアイコンが押し出して切り替わる）*/
.g-pyon-icon19 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon19 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: black; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #fff; /*枠線*/
  background-image: linear-gradient(#009110 0%, #a3ffd4 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon19 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f185"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: balck; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon19 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: -100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon19:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(255px); /*縦方向に移動*/
  -webkit-transform: translateY(255px); /*縦方向に移動*/
  transform: translateY(255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon19 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon19:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(255px); /*縦方向に移動*/
  -webkit-transform: translateY(255px); /*縦方向に移動*/
  transform: translateY(255px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-icon19">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（下からアイコンが画像を押し出す）*/
.g-pyon-icon20 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon20 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: yellow; /*文字色*/
  top: 0%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  transform: translate(-50%,0%); /*アイコンの基準位置調整*/
  border: solid 2px #0010ff; /*枠線*/
  background-image: linear-gradient(#38ff00 0%, #af00ff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon20 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f222"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon20 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon20:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-65px); /*縦方向に移動*/
  -webkit-transform: translateY(-65px); /*縦方向に移動*/
  transform: translateY(-65px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon20 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon20:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-65px); /*縦方向に移動*/
  -webkit-transform: translateY(-65px); /*縦方向に移動*/
  transform: translateY(-65px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-icon20">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（下からアイコンが押し出して切り替わる）*/
.g-pyon-icon21 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon21 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: white; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #0040ff; /*枠線*/
  background-image: linear-gradient(#0800ff 0%, #00ffe7 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon21 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f130"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon21 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  top: 100%; /*上側の位置*/
  left: 0px; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon21:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateY(-255px); /*縦方向に移動*/
  -webkit-transform: translateY(-255px); /*縦方向に移動*/
  transform: translateY(-255px); /*縦方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon21 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon21:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateY(-255px); /*縦方向に移動*/
  -webkit-transform: translateY(-255px); /*縦方向に移動*/
  transform: translateY(-255px); /*縦方向に移動*/
}

HTML

<div class="g-pyon-icon21">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（左からアイコンが画像を押し出す）*/
.g-pyon-icon22 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon22 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: black; /*文字色*/
  top: 50%; /*真ん中に表示*/
  right: 0%; /*真ん中に表示*/
  -ms-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #00ff28; /*枠線*/
  background-image: linear-gradient(#fffb00 0%, #14ff00 100%); /*グラデーション*/
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon22 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f118"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: black; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon22 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon22:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(40%); /*横方向に移動*/
  -webkit-transform: translateX(40%); /*横方向に移動*/
  transform: translateX(40%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon22 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon22:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(40%); /*横方向に移動*/
  -webkit-transform: translateX(40%); /*横方向に移動*/
  transform: translateX(40%); /*横方向に移動*/
}

HTML

<div class="g-pyon-icon22">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（左からアイコンが押し出して切り替わる）*/
.g-pyon-icon23 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon23 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: yellow; /*文字色*/
  top: 50%; /*真ん中に表示*/
  right: 50%; /*真ん中に表示*/
  -ms-transform: translate(50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #00dbff; /*枠線*/
  background-image: linear-gradient(#007cff 0%, #2c00ff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon23 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f193"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon23 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  left: -100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon23:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon23 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon23:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(100%); /*横方向に移動*/
  -webkit-transform: translateX(100%); /*横方向に移動*/
  transform: translateX(100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-icon23">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（右からアイコンが画像を押し出す）*/
.g-pyon-icon24 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon24 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: #000; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 0%; /*真ん中に表示*/
  -ms-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  transform: translate(0%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #fff; /*枠線*/
  background-image: linear-gradient(#ffcb00 0%, #fffb00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon24 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f144"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: balck; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon24 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon24:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-40%); /*横方向に移動*/
  -webkit-transform: translateX(-40%); /*横方向に移動*/
  transform: translateX(-40%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon24 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon24:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-40%); /*横方向に移動*/
  -webkit-transform: translateX(-40%); /*横方向に移動*/
  transform: translateX(-40%); /*横方向に移動*/
}

HTML

<div class="g-pyon-icon24">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（右からアイコンが押し出して切り替わる）*/
.g-pyon-icon25 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon25 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: yellow; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #ff9f9f; /*枠線*/
  background-image: linear-gradient(#900 0%, #f00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
}
/*アイコン表示用*/
.g-pyon-icon25 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f201"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*半透明の背景設定*/
.g-pyon-icon25 .haikei {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  left: 100%; /*左側の位置*/
  opacity: 1; /* 半透明の背景透明度 */
  background-color: rgba(0,0,0,0.8); /* 半透明の背景設定 */
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon25:hover .haikei {
  opacity: 1; /* 半透明の背景透明度 */
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}
/*画像の大きさ設定*/
.g-pyon-icon25 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  -webkit-transition: all 1s ease; /*アイコンが表示されるまでの時間*/
  transition: all 1s ease; /*アイコンが表示されるまでの時間*/
}
/*マウスを画像の上にのせたとき画像設定*/
.g-pyon-icon25:hover img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  -ms-transform: translateX(-100%); /*横方向に移動*/
  -webkit-transform: translateX(-100%); /*横方向に移動*/
  transform: translateX(-100%); /*横方向に移動*/
}

HTML

<div class="g-pyon-icon25">
ここに画像を入れる
    <div class="haikei">
      <div class="icon">続きを読む</div>
    </div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（上下スライド）*/
.g-pyon-icon26 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon26 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: yellow; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #00ff10; /*枠線*/
  background-image: linear-gradient(#006810 0%, #1bca02 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
  visibility: hidden;	/* アイコンを表示しない */
  opacity: 0; /* アイコン非表示 */
  -ms-transition: visibility 1s step-end; /*アイコン表示時間*/
  -webkit-transition: visibility 1s step-end; /*アイコン表示時間*/
  transition: visibility 1s step-end; /*アイコン表示時間*/
}
/*アイコン表示用*/
.g-pyon-icon26 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f236"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*アイコン表示用*/
.g-pyon-icon26:hover .icon{
  visibility: visible; /* アイコン表示 */
  opacity: 1; /* アイコン表示 */
}
/*半透明の背景設定*/
.g-pyon-icon26 .haikei1, .g-pyon-icon26 .haikei2 {
  position: absolute; /*絶対配置*/
  width: 100%; /*半透明の横幅*/
  height: 50%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  left: 0%; /*左側の位置*/
  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-icon26 .haikei1 {
  top: -50%; /* 枠の上に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon26:hover .haikei1 {
  top: 0px; /* 下へスライド */
}
/*下側スライド*/
.g-pyon-icon26 .haikei2 {
  bottom:	 -50%; /* 枠の下に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon26:hover .haikei2 {
  bottom:	 0px; /* 上へスライド */
}
/*画像の大きさ設定*/
.g-pyon-icon26 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon26">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <div class="icon">続きを読む</div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む

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

CSS

/*画像の上にアイコンがピョンッと出る（左右スライド）*/
.g-pyon-icon27 {
  position: relative; /*相対配置*/
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  overflow: hidden; /*はみだし非表示*/
}
/*文字の設定*/
.g-pyon-icon27 .icon {
  position: absolute; /*絶対配置*/
  font-size: 1.5em; /*文字サイズ*/
  color: yellow; /*文字色*/
  top: 50%; /*真ん中に表示*/
  left: 50%; /*真ん中に表示*/
  -ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  -webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
  border: solid 2px #ff00fb; /*枠線*/
  background-image: linear-gradient(#6800ff 0%, #ff00a7 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
  padding-right: 10px; /*文字の右側の余白*/
  visibility: hidden;	/* アイコンを表示しない */
  opacity: 0; /* アイコン非表示 */
  -ms-transition: visibility 1s step-end; /*アイコン表示時間*/
  -webkit-transition: visibility 1s step-end; /*アイコン表示時間*/
  transition: visibility 1s step-end; /*アイコン表示時間*/
}
/*アイコン表示用*/
.g-pyon-icon27 .icon:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f015"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  padding-left: 10px; /*アイコンの左側の余白*/
  color: yellow; /*アイコンの色*/
}
/*アイコン表示用*/
.g-pyon-icon27:hover .icon{
  visibility: visible; /* アイコン表示 */
  opacity: 1; /* アイコン表示 */
}
/*半透明の背景設定*/
.g-pyon-icon27 .haikei1, .g-pyon-icon27 .haikei2 {
  position: absolute; /*絶対配置*/
  width: 50%; /*半透明の横幅*/
  height: 100%; /*半透明の高さ*/
  bottom: 0%; /*下側の位置*/
  top: 0%; /*上側の位置*/
  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-icon27 .haikei1 {
  left: -50%; /* 枠の左に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon27:hover .haikei1 {
  left: 0px; /* 右へスライド */
}
/*右側スライド*/
.g-pyon-icon27 .haikei2 {
  right: -50%; /* 枠の右に移動*/
}
/*マウスを画像の上にのせたとき*/
.g-pyon-icon27:hover .haikei2 {
  right: 0px; /* 左へスライド */
}
/*画像の大きさ設定*/
.g-pyon-icon27 img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
}

HTML

<div class="g-pyon-icon27">
ここに画像を入れる
  <div class="haikei1"></div>
  <div class="haikei2"></div>
  <div class="icon">続きを読む</div>
</div>
「ここに画像を入れる」の文字を消して、画像Lを入れてください。

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

続きを読む