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!! :)

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX