cssでマウスホバーのエフェクトを作成しました。
google chromeでは下記のようにちゃんと動くのですが、firefoxだと画像が反転するだけで文言が出てきません。
ホバーエフェクト
画像上にマウスを持っていくと画像がy軸回転し、開店した個所に文言が出てくる
よろしくお願いいたします。
html
1<div class="sl-box"> 2 <a href="/"> 3 <div class="sl-contents"> 4 <div class="sl-img"> 5 <img src="" class="img-responsive" alt="・"> 6 </div> 7 <div class="sl-text"> 8 <h4 class="sl-h4">タイトル</h4> 9 <p> 10 このテ!キストはサンプルです。<br> 11 このテキストはサンプルです。 12 </p> 13 <div class="sl-btn">詳しく見る</div> 14 </div> 15 </div> 16 </a> 17</div>
css
1.sl-contents { 2 position: relative; 3 width:100%; 4 -webkit-perspective: 1000; 5 -moz-perspective: 1000; 6 perspective: 1000; 7 -webkit-transition: .5s; 8 -moz-transition: .5s; 9 transition: .5s; 10 -webkit-transform-style: preserve-3d; 11 -moz-transform-style: preserve-3d; 12 transform-style: preserve-3d; 13} 14.sl-img, 15.sl-text { 16 position: absolute; 17 width: 100%; 18 -webkit-backface-visibility: hidden; 19 -moz-backface-visibility: hidden; 20 backface-visibility: hidden; 21} 22.sl-img { 23 z-index: 2; 24} 25.sl-text { 26 background: #fff; 27 border: 2px solid #00B900; 28 -webkit-box-sizing: border-box; 29 -moz-box-sizing: border-box; 30 box-sizing: border-box; 31 height:189.703px; 32} 33.sl-box:hover .sl-contents, 34.sl-text { 35 -webkit-transform: rotateY(180deg); 36 -moz-transform: rotateY(180deg); 37 transform: rotateY(180deg); 38} 39.sl-h4{ 40 text-align:center; 41 font-size:24px; 42 color:#000; 43} 44.sl-h4 span{ 45 color:#00B900; 46} 47.sl-text p{ 48 padding:0 15px; 49 color:#000; 50} 51.sl-btn { 52 position: relative; 53 display: block; 54 padding: .9em 3.6em; 55 border: 2px solid #000; 56 color: #000; 57 text-align: center; 58 text-decoration: none; 59 outline: none; 60 transition: all .2s; 61 margin:0 auto; 62 width:200px; 63} 64.sl-btn::before, 65.sl-btn::after { 66 position: absolute; 67 z-index: 2; 68 content: ''; 69 width: 0; 70 height: 0; 71 border: 2px solid transparent; 72} 73.sl-btn::before { 74 top: -2px; 75 left: -2px; 76} 77.sl-btn::after { 78 bottom: -2px; 79 right: -2px; 80} 81.sl-btn:hover { 82 color: #00B900; 83 border:solid 2px #fff; 84} 85.sl-btn:hover::before, 86.sl-btn:hover::after { 87 width: 100%; 88 height: 100%; 89} 90.sl-btn:hover::before { 91 border-bottom-color: #00B900; 92 border-left-color: #00B900; 93 transition: height .3s, width .3s .3s; 94} 95.sl-btn:hover::after { 96 border-top-color: #00B900; 97 border-right-color: #00B900; 98 transition: height .3s, width .3s .3s; 99}
回答1件
あなたの回答
tips
プレビュー