リンクホバー効果を適用すると、リンクが表示されなくなります（ホバー効果は機能しますが）。何かご意見は？

Question

ご協力いただきありがとうございます。私はCSSには比較的新しいので、以前はトランジションで作業していませんでした。

ここでは、背景イメージとテキストブロックを持つ単純なdivがあります。ここではCSSホバー効果の前にcodepinが追加されます：http://codepen.io/miskellaneousness/pen/vGQoWa

<div class="col bodybox sportsb" style="background-image: url(http://i.imgur.com/Lq76c1G.jpg);"> 
     <h3><a href="generic-article.html" class="hvr-sci"> 
      <span class="singleline"> 
       Kayak or Surfboard? 
      </span></a> 
     </h3> 
</div> 

はここに関連するCSSです：

.bodybox { 
width: 23.8%; 
background-color: #D5DBDB; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
height: 240px; 
padding-left: 4px; 
color: pink; 
background-size: cover; 
background-position: -18px; 
} 
h3 span { 
position: relative; 
top: 100px; 
left: 10px; 
width: 100%; 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px; 
background: rgb(0, 0, 0); 
background: rgba(0, 0, 0, 0.7); 
padding: 10px; 
} 

私もCSSを変換ボタンを追加すると、テキストが消えます。 div内のテキストの位置をスクロールすると、ボタンエフェクトは機能しますが、テキストは表示されません。ここではCSSとCodepenが追加されます：ここで

http://codepen.io/miskellaneousness/pen/RaqXGyは追加のCSSです：作るように見えた.hvr-SCIに隠された：私はcodepenにあなたのCSSを追加し、そのオーバーフローを削除

.hvr-sci { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    overflow: hidden; 
    } 
.hvr-sci:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    right: 100%; 
    bottom: 0; 
    background: #f1c40f; 
    height: 2px; 
    -webkit-transition-property: right; 
    transition-property: right; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sci:hover:before, .hvr-sci:focus:before, .hvr-sci:active:before { 
right: 0; 
} 

Answer 1

ライン効果。あなたが望む効果があれば100％確信していませんか？