Es gibt dafür einen Code-Tag.
Code
<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>
CSS:
.pro_layer {
position: relative;
/*width:290px;*/
flex:30%;
margin-top:-10px;
height:290px;
/*margin-left:27.9%;*/
background-repeat:no-repeat;
z-index: 0;
background-image:url(bilder/hochtitel.jpg);
}
.pro_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{
opacity: 1;
}
.bar_layer:hover .bar_shadow{
opacity: 1;
}
.bar_layer {
position: relative;
/*width:290px;*/
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;
}
.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: 1;
}
.mask3 {
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 {
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;
}
.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;
}
.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;
}
