Hover時アニメーション付き画像ボタン

やりたいこと
動作確認環境
HTML
CSS
ボタンを増やしたい場合
１列に並べるボタン数を増やしたい場合
文字を下付きにしたい場合
文章の範囲を調整したい場合
文章のフォントサイズについての注意点
Hover時のアニメーション設定
- 秒数設定
- 倍率
文章の装飾を変更したい
CSS解説

やりたいこと

ボタン画像を横並びにする
画像にテキストを重ねて表示
hover時に画像拡大アニメーション
レスポンシブであること
※フォントはHTMLの設定に依存
※スマホでも横並び個数を変更しない

動作確認環境

Wordpress , 自作HTML文書
Chrom(PC ,Android) , Safari(PC)

HTML

コピペ可能
※class名"menulist"が他と被る場合は変更すること

<ul class="menulist">
  <li>    
    <a href="リンク先URL"><img src="画像URL">
    <span>ボタンの名前</span></a>
  </li>
  <li>    
    <a href="リンク先URL"><img src="画像URL">
    <span>ボタンの名前</span></a>
  </li>
  <li>    
    <a href="リンク先URL"><img src="画像URL">
    <span>ボタンの名前</span></a>
  </li>
</ul>

CSS

コピペ可能

/*  リスト全体  */
.menulist{
  font-size: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

/* 念のための余白処理 */
.menulist *{
  margin: 0;
  padding: 0;
}

/*  リスト要素 */
.menulist li{
  width: 33%;
  position: relative;
  overflow: hidden;
}

/*  画像  */
.menulist img{
  width:100%;
  max-width: 100% !important;
}

/*  文章 */
.menulist span{
  font-size: 1rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #FFF;
  text-shadow: #000 0 0 5px;
  width:96%;
  display: block;
}

/*  Hover時の画像  */
.menulist a:hover img{
  transition-duration: 5s;
  transform: scale( 1.5 );
  -webkit-transition-duration: 5s;
  -ms-transition-duration: 5s;
  -webkit-transform: transform: scale( 1.5 );
  -ms-transform: transform: scale( 1.5 );
}

ボタンを増やしたい場合

HTMLを編集する。

  <li>    
    <a href="リンク先URL"><img src="画像URL">
    <span>ボタンの名前</span></a>
  </li>

これで１セットになっているので、これをコピペで増やせばOK。
増えた分は、次の列に表示される。

１列に並べるボタン数を増やしたい場合

CSSを編集する。

/*  リスト要素  */
.menulist li{
  width: 33%;
}

横に何個並べるかを決めるのが、li要素に付けたwidth: 33%;になる。
親要素の横幅に対するパーセンテージで表示する。
100% ÷ 個数で算出。５個並べるなら、100/5=20%となる。

文字を下付きにしたい場合

/*  文章  */
.menulist span{
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}

文章の範囲を調整したい場合

どういうわけか、spanの領域が画像よりもだいぶ狭かったので、なんとなくwidthを設定してみたら広がったので、とりあえず良しとしてみた。
インライン要素ってwidth設定できないんじゃなかったのか？と思いつつ、念のためblock設定もしておいた。

/*  文章  */
.menulist span{

  width:96%;
  display: block;

}

文章のフォントサイズについての注意点

文章のフォントサイズはspanで設定してある。

/*  文章 */
.menulist span{
  font-size: 1rem;

}

remという単位は、htmlの設定を基準にするもので、ここはスマホとPCとにらめっこしながら適宜調整が必要になってくる。
注意点は、画像の範囲からはみ出てしまう文章は表示されなくなるということ。
枠内に収まるように文字数調整が必要になる。特にスマホは要注意。
どうしてもというなら、vwという単位を使う手もあるが、今度は文字が小さくなりすぎるかもしれない。
残念ながら、今の所ちょうどいい設定が思いつかない・・・。

Hover時のアニメーション設定

秒数設定

.menulist a:hover img{

  transition-duration: 5s;
  -webkit-transition-duration: 5s;
  -ms-transition-duration: 5s;

}

5s＝5秒
３つとも設定すること。

倍率

.menulist a:hover img{

  transform: scale( 1.5 );
  -webkit-transform: transform: scale( 1.5 );
  -ms-transform: transform: scale( 1.5 );

}

カッコ内に倍率を設定。こちらも３つとも設定する。

文章の装飾を変更したい

文字を画像にかぶせてるので、白文字で黒影いれてます。不要なら以下の箇所を削除しちゃってOK。

/*  文章 */
.menulist span{

  color: #FFF;
  text-shadow: #000 0 0 5px;

}

CSS解説

画像を横並びにする

画像に文章を重ねる

リストの余白を消す

<ul>などのリストタグの要素を横並びにしたときに、微妙な隙間ができちゃってイラっとするやつ。
ここでも画像と画像の間に微妙な隙間ができちゃったので、それを消す処理。

/*  リスト全体  */
.menulist{

  font-size: 0;

}

なんとこれだけ！アメイジング〜♪と喜んだのも束の間、自作HTMLならちゃんと表示されたのに、Wordpressに移植したら隙間復活！
ゾンビと化した隙間の原因は、テーマで設定されていたコレ。

.entry-content img, .comment-content img, .widget img {
    max-width: 97.5%;
}

imgタグに対して97.5%って設定しちゃってるよ。このせいで、枠に対して画像が縮小表示されて隙間ができていた模様。
どういう意図でこれを設定されたのかは不明だけど、無視してやる！ということで、importantで強制的に100%にしてやったぞ。

/*  画像  */
.menulist img{
  width:100%;
  max-width: 100% !important;
}

テーマによってはこの処理は不要かも。或いは、バグるかも？class属性入れてるから大丈夫だと思うけど。
Wordpressって、着せ替えみたいにいろんなデザインあって楽しいんだけど、こういうテーマやらプラグインが干渉しちゃうところが難ですな。

このままだと、font-size:0のままなので文章が表示されなくなっちゃうから、spanにfont-sizeを設定する。

/*  文章 */
.menulist span{
  font-size: 1rem;

}

remというのは、htmlの設定を基準にするので、一応1remにしてある。

Hover時の処理

transformを使って画像を拡大アニメーションにしてます。

/*  Hover時の画像  */
.menulist a:hover img{
  transition-duration: 5s;
  transform: scale( 1.5 );
  -webkit-transition-duration: 5s;
  -ms-transition-duration: 5s;
  -webkit-transform: transform: scale( 1.5 );
  -ms-transform: transform: scale( 1.5 );
}

この例だと、5秒で1.5倍になるように設定してある。

Hover時の拡大したときにはみ出ないようにする

Hoverで画像を拡大するので、枠からはみ出て表示されちゃうのを防ぐためにoverflow: hidden;を親要素に設定してある。

/*  リスト要素 */
.menulist li{

  overflow: hidden;

}

以上。

ロバメモ - 素人のUnity覚書と奮闘記

素人のUnity覚書と奮闘記