Verknüpfen ein <img class> Bild zu einem URL - arbeiten gut in Safari und Chrom, aber nicht in Firefox

Question

Ich arbeite auf dieser Seite:

http://doitanyway.dk/intelligentsystems/en/homeuk/

Direkt unter Schiebern gibt es 6 Bilder mit einigen geschichteten Hover-Effekten. In Safari, Chrome und Opera funktioniert alles wie ein Zauber - aber nicht in Firefox (und Tor).

Es scheint die "A href" -Wrap um die IMG-Klasse, die das Problem ist. Es funktioniert nicht in meinem Mac Firefox 52.0. Jeder kennt einen Workaround ...?

Hier ist der Code für das erste der Bilder:

HTML

<div class="width: 130px"> 
<div class="hovereffect"> 
<a href="http://doitanyway.dk/intelligentsystems/en/healthcare/"> 
<img class="img-responsive" src="http://doitanyway.dk/intelligentsystems/wp-content/uploads/2017/03/submenu_front1.png" alt=""> 
</a> 
<div class="overlay"> 
<h2>Healthcare</h2> 
<p> 
<a href="http://doitanyway.dk/intelligentsystems/en/healthcare/">See our solutions</a> 
</p> 
</div> 
</div> 
</div> 

CSS

.hovereffect { 
    width: 100%; 
    height: 100%; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    cursor: default; 
    background: #000000; 
    border-radius: 10px !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
} 

.hovereffect .overlay { 
pointer-events: none; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    padding: 129px 10px; 
    border-radius: 10px !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
} 

.hovereffect img { 
    display: block; 
    position: relative; 
    -webkit-filter: sepia(50%); /* Safari */ 
    filter: sepia(50%); 
    max-width: none; 
    /* width: calc(100% + 20px); */ 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.7s, transform 0.7s; 
    /* -webkit-transform: translate3d(-10px,0,0); */ 
    /* transform: translate3d(-10px,0,0); */ 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    border-radius: 10px !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
} 

.hovereffect:hover img { 
pointer-events: none; 
    border-radius: 10px !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    border-radius: 10px !important; 
    -moz-border-radius: 10px !important; 
    -webkit-border-radius: 10px !important; 
} 

.hovereffect h2 { 
/* text-transform: uppercase; */ 
    color: #fff; 
    text-align: center; 
    position: relative; 
    font-size: 11px; 
    overflow: hidden; 
    padding: 0.5em 0; 
    background: rgba(0, 0, 0, 0.6); 
    border-radius: 8px; 
} 

.hovereffect h2:after { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    background: #fff; 
    content: ''; 
    -webkit-transition: -webkit-transform 0.35s; 
    transition: transform 0.35s; 
    -webkit-transform: translate3d(-100%,0,0); 
    transform: translate3d(-100%,0,0); 
} 

.hovereffect:hover h2 { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    text-shadow: none; 
    background: rgba(0, 0, 0, 0); 
} 

.hovereffect:hover h2:after { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

.hovereffect a, .hovereffect p { 
    color: #FFF; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(100%,0,0); 
    transform: translate3d(100%,0,0); 
    font-size: 10px; 
} 

.hovereffect:hover a, .hovereffect:hover p { 
    opacity: 1 !important; 
    filter: alpha(opacity=100); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    font-size: 10px; 
} 

Answer 1

die folgende CSS-Regel löschen.

.hovereffect a, .hovereffect p {Opazität: 0}

Answer 2

Welche Firefox-Version ist es nicht arbeitet? Es arbeitet an FF 51 für mich. Diese Attribute werden möglicherweise nicht unterstützt oder Sie müssen möglicherweise allen Ihren Transformationen eine zusätzliche -moz-Regel hinzufügen. Überprüfen Sie die Unterstützung hier: http://caniuse.com/#search=transform