###前提
box-shadowのついたa tagのdivを用意しました。
###困っていること
box-shadowのhover効果がimg要素の下に隠れてしまい、こまっております。
cssのbackgroundにてimgをせっているするなどしましたが、うまくいっておりません。
box-shadowの効果をimgの上に乗せる方法をお教えください。
###該当のソースコード
html
1<li class="item item01"> 2<div class="shadow"><a href="#" target="_blank" class="accepting"><img src="/img/office01.png" alt="office01"></a></div> 3</li>
css
1.item a{ 2 float: left; 3 width: 309px; 4 height: 231px; 5 position: relative; 6 display: block; 7 transition: all .2s cubic-bezier(0.25, .46, .45, .94); 8 z-index: 1; 9 margin-right: 32px; 10 box-shadow: inset 0 0 0 5px #ccc; 11} 12 13.item .shadow{ 14 box-shadow: inset 0 0 0 5px #ccc; 15} 16 17.item a:hover{ 18 box-shadow: inset 0 0 0 8px #ccc; 19 opacity: 0.8 20}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。