リンクにマウスオーバーをした時の borderのエフェクトについて
なかなか再現できず困っています。
##やりたいこと
リンクにマウスオーバーした時に左下と右上から
左下は 上と右に向かってborderが伸びる
右上は 下と左に向かってborderが伸びる
最終的にborderで囲われた形になる
マウスオーバーが外れたら上記のように表示されたborderが非表示になる
##コード
html
1 <ul> 2 <li> 3 <a href="#" class="button"> 4 <img src="/image/xxxxx.jpg"> 5 </a> 6 </li> 7 <li> 8 <a href="#" class="button"> 9 <img src="/image/xxxxx.jpg"> 10 </a> 11 </li> 12 <li> 13 <a href="#" class="button"> 14 <img src="/image/xxxxx.jpg"> 15 </a> 16 </li> 17 <li> 18 <a href="#" class="button"> 19 <img src="/image/xxxxx.jpg"> 20 </a> 21 </li> 22 </ul>
css
1 * { 2 padding: 0; 3 margin: 0; 4 } 5 ul { 6 display: -webkit-flex; 7 display: -moz-flex; 8 display: -ms-flex; 9 display: -o-flex; 10 display: flex; 11 -webkit-flex-wrap: wrap; 12 -moz-flex-wrap: wrap; 13 -ms-flex-wrap: wrap; 14 -o-flex-wrap: wrap; 15 flex-wrap: wrap; 16 } 17 li { 18 width: 300px; 19 } 20 a { 21 overflow: hidden; 22 display: block; 23 position: relative; 24 } 25 a.button::before, 26 a.button::after { 27 position: absolute; 28 top: 0; 29 right: 0; 30 bottom: 0; 31 left: 0; 32 z-index: 2; 33 content: ''; 34 -webkit-transition: all .5s; 35 transition: all .5s; 36 } 37 38 a.button::before { 39 border-top: 20px solid #196ea9; 40 border-bottom: 20px solid #196ea9; 41 -webkit-transform: scale(0, 1); 42 -ms-transform: scale(0, 1); 43 transform: scale(0, 1); 44 } 45 46 a.button::after { 47 border-right: 20px solid #196ea9; 48 border-left: 20px solid #196ea9; 49 -webkit-transform: scale(1, 0); 50 -ms-transform: scale(1, 0); 51 transform: scale(1, 0); 52 } 53 54 a.button:hover::before, 55 a.button:hover::after { 56 -webkit-transform: scale(1); 57 -ms-transform: scale(1); 58 transform: scale(1); 59 }
上記の内容でマウスオーバー時に
上下左右のborderがそれぞれ真ん中から上下・左右に表示されるところまではできたのですが
表題の通りの動作にしたいです。
##参考サイト
http://www.aim-info.co.jp/recruit/
各人物にマウスオーバーした時に MOREボタンが表示されますが
このMOREボタンにマウスオーバーした時のborderの挙動がイメージに近いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー