Durch das Anwenden eines Link-Hover-Effekts wird mein Link ausgeblendet (obwohl der Hover-Effekt funktioniert). Irgendwelche Gedanken?

Question

Vielen Dank im Voraus für die Hilfe und Geduld. Ich bin relativ neu in CSS und habe noch nie mit Übergängen gearbeitet.

Hier habe ich ein einfaches div mit einem Hintergrundbild und einem Textblock darüber. Hier ist der codepin vor dem CSS-Hover-Effekt hinzugefügt: 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> 

Hier ist der Zusammenhang mit 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; 
} 

Wenn ich die Schaltfläche verwandeln CSS obwohl hinzufügen, verschwindet der Text. Wenn ich scrolle, wo der Text in der div sein würde, funktioniert der Button-Effekt, aber der Text ist nicht sichtbar. Hier ist die Codepen mit dem CSS hinzugefügt: http://codepen.io/miskellaneousness/pen/RaqXGy

Hier ist das CSS, das hinzugefügt:

.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

Wenn ich Ihre CSS in die codepen hinzugefügt und entfernt, dass overflow: hidden auf dem .hvr-sci es schien zu schaffen ein Linieneffekt. Ich bin mir nicht 100% sicher, ob das der gewünschte Effekt ist, den Sie wollten?