花の写真素材屋のバナー素材を利用して、画像にホバーしたらアクションをするＢＡＮＮＥＲボタンです。下のＨＴＭＬやＣＳＳを自由にアレンジしてお好きなＢＡＮＮＥＲをつくろう。
コピペOK！
※画像素材はバナー以外の使用も可能ですが、花の写真素材屋の利用規約を軽く目を通してください。
↓表示していない場合はResultをクリックして画像表示
See the Pen test by Mo Mo (@dccykcyk-the-looper) on CodePen.
下のホバーバナーは上記HTML・CSSからの変更点を下記に記載しています。またサンプル画像を含む各素材画像以外を使用する場合は、位置調整を行ってください。
花の写真素材屋バナー素材画像(234px・60px)
See the Pen test1 by Mo Mo (@dccykcyk-the-looper) on CodePen.
【class="jh-b01"】→【class="jh-b03"】classはお好きな文字で
【span{left:50%;font-size:16px;】
【.jh-b03 .caption {color: #fff; padding: 0.5em; font-size: 22px;.....}】
【.jh-b02 .mask{width: 100%; background-color: rgba(0,128,0,0.7); -webkit-transition: all 0.7s ease;transition: all 0.6s ease; -webkit-transform: scale(1); transform: scale(0);.......}】
【.jh-b03:hover .mask {-webkit-transform: scale(1); transform: scale(1);}】
【＜SPAN＞花の写真素材屋へようこそ！】
【<img src="お好きな画像" <!-- <a href="#"> --> →<a href="URL">】
【 】は説明用
花の写真素材屋バナー素材画像(234px・60px)
See the Pen test2 by Mo Mo (@dccykcyk-the-looper) on CodePen.
【class="jh-b01"】→【class="jh-b02"】classはお好きな文字で
【.jh-b02 .mask {width: 100%;background-color: rgba(0,153,255,0.2);】→【width: 70%;color: rgba(0,153,255,0.4);】ウインドウ幅・透過度を変更 お好きな値で
【.jh-b02:hover .mask {padding-left: 10px;】→【.jh-b02:hover .mask {padding-left: 5px;】左からの位置、お好きな値で
【<SPAN>花の写真素材屋</SPAN>とclass="caption"花の素材へ】は好きな値と文字で
【画像bana234_18.png】→【画像bana234_19.png】
【＜SPAN＞花の写真素材屋とCAPTIONの花の素材へ】→好きな文字で
【<img src="お好きな画像" <!-- <a href="#"> --> →<a href="URL"】
【 】は説明用
参考サンプル
↓表示していない場合はResultをクリックして画像表示
See the Pen test3 by Mo Mo (@dccykcyk-the-looper) on CodePen.
参考サンプル
See the Pen test4 by Mo Mo (@dccykcyk-the-looper) on CodePen.
参考サンプル
See the Pen test5 by Mo Mo (@dccykcyk-the-looper) on CodePen.
BANNER素材
 | | |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |  |  |  |
 |