問題
ロールオーバー時に影を付けて浮いたように見せるには？
解決策
cssにて、ロールオーバー時にbox-shadowを設定する。
ロールオーバー時に影を付ける。
記事のリストなどで、カーソルを合わせた時に影が付いて、浮いたかのように見せる演出を見かけます。
今回はロールオーバー時に影を付けて浮いたように見せる方法をご紹介します。
DEMOはこちら
HTMLの構築
aタグを並べて配置します。
囲うdivタグのクラスに「hovershadow-box」を設定します。
<div class="hovershadow-box">
<a href="#">
<span class="titles">タイトル</span>
<span class="text">テキストテキストテキストテキスト</span>
</a>
<a href="#">
<span class="titles">タイトル</span>
<span class="text">テキストテキストテキストテキスト</span>
</a>
<a href="#">
<span class="titles">タイトル</p>
<span class="text">テキストテキストテキストテキスト</p>
</a>
<a href="#">
<span class="titles">タイトル</span>
<span class="text">テキストテキストテキストテキスト</span>
</a>
</div>cssの構築
クラス「hovershadow-box」とその中のaタグに対して、cssを設定します。
そしてaタグのロールオーバー時「hover」に対して、「box-shadow」を設定します。
.hovershadow-box{
letter-spacing: -.4em;
}
.hovershadow-box > a{
display: inline-block;
vertical-align: middle;
width: 25%;
padding: 10px 15px;
letter-spacing: normal;
background-color: #ffffff;
border: 1px solid #dddddd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.hovershadow-box > a .titles{
display: block;
font-size: 106.25%;
font-weight: bold;
}
.hovershadow-box > a .text{
display: block;
margin-bottom: 0;
}
.hovershadow-box > a:hover{
position: relative;
box-shadow:0px 0px 6px 0px #40180A;
}
@media only screen and (max-width: 767px) {
.hovershadow-box > a{
width: 50%;
}
}
コメント