Hover-Effekt funktioniert nicht

sini

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

Sailor

Poste den Code... keiner wird hier eine gezippte Datei runter laden.

sini

hab ich mir hinterher auch so gedacht, sorry.

HTML

<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>

Alles anzeigen

Code

.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;
}

Alles anzeigen

basti1012

Wie 6 Kacheln? ich sehe nur 2 und die haben noch verschiedene class Namen . Da kann nichts gleich sein.

Da ich nicht weiß wie deine anderen (ersten 4) Kacheln aussehen habe ich deine beiden mal einfach auf gut Glück angepasst. Weiß aber nicht, ob du das so meinst

https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=502

Deine CSS könnte man aber noch etwas kürzen. Wäre aber sinnvoll, wenn man erst den Rest kennen würde

Gastl

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;
}

Alles anzeigen

sini

Das ist der komplette Code. Danke für die Info!

HTML

<div class="image_column_1">
<div class="wop_layer"><div class="wop_shadow">    <div class="mask">01 Pix it!</div>
  <div class="mask12">Pix it! ist eine interakive Messlatte, die speziell für Mütter und ihre heranwachsenden Kinder bestimmt ist.</div> </a></div> </div>




<div class="sb_layer"><div class="sb_shadow">  <a href="storybox.html">    <div class="mask2">02 Storybox</div>
  <div class="mask22">Die Storybox soll lästige Wartezeit, wie zum Beispiel beim Arzt, in ein positives Erlebnis verwandeln.</div> </a></div></div>




<div class="take_layer"><div class="take_shadow">    <a href="takeaseat.html">    <div class="mask4">03 Take a Seat!</div>
    <div class="mask42">Die Applikation "Take a Seat!" soll die Platzsuche im Kinosaal vereinfachen.</div> </a></div></div></div>












<div class="image_column_2">
<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>
<div class="bachelor_layer"><div class="bachelor_shadow">    <div class="mask6">06 Bachelor-Thesis</div>    <div class="mask62">[Inhalt folgt.]Gestaltung eines Handlungsszenarios im Car-Sharing Kontext in Zusammenarbeit mit der Firma Bertrandt.</div></div></div>






</div>

Alles anzeigen

Code

.image_column_1 {    display: flex;
    margin-top: 80px;
}




.image_column_2 {
    display: flex;
    margin-top: 20px;
}
















.wop_layer {
    position: relative;
    /*width:290px;*/
    flex:30%;
    display:flex;
    height:290px;
    /*height:290px;*/
    background-image:url(bilder/titel_wop.jpg);
    background-repeat:no-repeat;
    z-index: 0;
}








.wop_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;
}




.wop_layer:hover .wop_shadow{
    opacity: 1;
}




































.sb_layer:hover .sb_shadow{
    opacity: 1;
}








.sb_layer {
    position: relative;
    /*width:290px;*/
    flex:30%;
    height:290px;
    /*margin-left:27.9%;*/
    margin-left:10px;
    background-image:url(bilder/aaa.jpg);
    background-repeat:no-repeat;
    z-index: 0;
}




.sb_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;    
}
















.take_layer:hover .take_shadow{
    opacity: 1;
}
.take_layer {
    position: relative;
    /*width:290px;*/
    flex:30%;
    height:290px;
    margin-left:10px;
    /*margin-left:55.8%;*/
    background-image:url(bilder/titelbild.png);
    background-repeat:no-repeat;
    z-index: 0;
}
.take_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 {
    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;    




}




.bachelor_layer:hover .bachelor_shadow {
    opacity: 1;
}








.bachelor_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/id_buzz.png);
    background-repeat:no-repeat;
    z-index: 0;
}




.bachelor_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;
}




.mask {
    position:absolute;
    /*width:200px;*/
    /*heigth:290px;*/
    width:80%;
    padding-left:10%;
    margin-top:70px;
    text-align:center;
    z-index: 2;
    font-size: 1em;
    font-family: 'Oswald', sans-serif;
}




.mask12 {
    position:absolute;
    /*width:260px;*/
    /*heigth:290px;*/
    width:80%;
    padding-left:10%;
    margin-top: 140px;
    text-align:center;
    z-index: 2;
    font-size: 0.5em;
    color:#FFF;
    font-family: 'Quicksand', sans-serif;
}








.mask2 {
    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;
}




.mask22 {
    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;
}












.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;
}












.mask4 {
    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;
}




.mask42 {
    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;
}




.mask6 {
    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;
}




.mask62 {
    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;
}

Alles anzeigen

Sailor

Da stimmt was nicht... beim kopieren des Eintrages von .bar_shadow erscheint bei mir im Editor ?.bar_shadow. Hast du da irgendwelche Steuerzeichen eingebaut?
Auf jeden Fall wird anscheinend (zumindest bei mir) diese Klasse .bar_shadow nicht richtig, bzw gar nicht formatiert.

sini

ich habe leider selbst nicht viel Ahnung davon.
Problem ist denke ich, dass shadow nicht als shadow und hover erkannt wird und deshalb permanent angezeigt wird.
bei mir wird jedoch, was den Code betrifft, auch nichts anderes angezeigt, als das was ich kopiert und eingefügt habe.

Sailor

Dann probiere mal diesen gesamten Block .bar_shadow (plus eine Zeile davor und dahinter) zu löschen und neu manuell einzufügen.

- - - Aktualisiert - - -

... und dann machst du aus den Formaten für .bar_shadow und .pro_shadow nur einen Block (aus 2 mach 1), denn die beiden Formate sollten gleich sein.
Und für Beide mach den opacity Wert größer als 0 (zB 0.5)

sini

Dank dir, hat funktioniert auch ohne opacity zu verändern. hab nur aus beiden Formaten eins gemacht.
funktioniert aber nach wie vor nicht für die sechste Kachel. "bachelor_shadow"

Nehme alles zurück. Es funktioniert. Vielen Dank für die Hilfe!!!!!!!!!!

Hover-Effekt funktioniert nicht

Tags

Benutzer online in diesem Thema