前提・実現したいこと
Intense ImageというJQueryで拡大機能をつけた画像の上に
CSSでつくったリンクボタンを設置したい。
発生している問題・エラーメッセージ
リンクボタン①は問題なく表示されるが、リンクボタン②が表示させられない。
※リンクボタン②だけを単独で設置すると問題なく表示されるのでhtmlの表記に問題があるとは
思うのですが、見当がつきません。
該当のソースコード
html(CSSボタン①をつかうとき)
<div class="page kakudai" data-image="./拡大後の画像" > <img src="拡大前の画像" alt=""> <a href="リンク先URL" class="btn01 btn" target="_blank"> </a> </div>
html(CSSボタン②をつかうとき)
<div class="page kakudai" data-image="./拡大後の画像" > <img src="拡大前の画像" alt=""> <a href="リンク先URL" class="btn01 btn_a" target="_blank"> </a> </div>
CSSボタン①(btn)
.btn{ display: inline-block; text-decoration: none; color: #FFF; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; background-image: -webkit-linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%); background-image: linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%); transition: .4s; }
CSSボタン②(btn_a)
.btn_a{ display: inline-block; padding: 0.5em 1em; text-decoration: none; border-radius: 4px; color: #ffffff; background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%); background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: solid 3px #c58668; } .btn_a:active{ -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none; }
CSSボタンの位置情報として(btn01)
.btn01{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; }
試したこと
class名:pageで画像にボタンをのせ、
Class名:kakudaiでIntense-Imageを適用しているというつもりです。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー