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; background-image:url(bilder/hochtitel.jpg); } .bar_layer { position: relative; flex:30%; margin-left:10px; margin-top:-10px; display:flex; height:290px; /*margin-left:27.9%;*/ background-image:url(bilder/titel_bar.png); 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!