Hover-Effekt funktioniert nicht
Hallo ihr Lieben!
Mein Portfolio hat auf der Startseite 6 Kacheln mit einem Hover-Effekt.
Dieser Effekt soll bei allen Kacheln wie bei den ersten 4 Kacheln angezeigt werden.
Trotz gleichem Code (sofern ich nichts übersehen habe) funktioniert der Hover nicht.
Bitte um schnelle Hilfe!! :)
Der hier verwendete Code
<html>
<head>
<style>
.pro_layer{
position: relative;
flex:30%;
margin-top:-10px;
height:290px;
/*margin-left:27.9%;*/
background-repeat:no-repeat;
z-index: 0;
}
.bar_layer {
position: relative;
flex:30%;
margin-left:10px;
margin-top:-10px;
display:flex;
height:290px;
/*margin-left:27.9%;*/
background-repeat:no-repeat;
z-index: 0;
}
.pro_shadow ,.bar_shadow {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
opacity: 0;
}
.pro_layer:hover .pro_shadow,.bar_layer:hover .bar_shadow{
opacity: 1;
}
.mask3,.mask5 {
position:absolute;
/*width:200px;*/
width:80%;
padding-left:10%;
margin-top:70px;
text-align:center;
z-index: 2;
font-size: 1em;
font-family: 'Oswald', sans-serif;
}
.mask32,.mask52 {
position:absolute;
width:80%;
padding-left:10%;
margin-top: 140px;
text-align:center;
/*width:260px;*/
z-index: 2;
font-size: 0.5em;
color:#FFF;
font-family: 'Quicksand', sans-serif;
}
</style>
</head>
<body>
<div class="pro_layer">
<div class="pro_shadow">
<a href="legalrape.html">
<div class="mask3">04 Legal Rape</div>
<div class="mask32">Die Plakatserie „LEGAL RAPE“ protestiert gegen das Strafrecht in Bezug auf Vergewaltigung und sexuelle Gewalt.</div> </a>
</div>
</div>
<div class="bar_layer">
<div class="bar_shadow">
<a href="bar.html">
<div class="mask5">05 Animation</div></a>
<div class="mask52">Dieses Video entstand innerhalb eines Kurses für das Programm Cinema 4D.</div>
</div>
</div>
</body>
</html>