Beiträge von sini

sini

Ich hab media="screen" in den HTML code eingesetzt:

HTML

<link href="home.css" rel="stylesheet" type="text/css" media="screen"/>

im CSS steht

Code

@media screen and (max-width: 1920px) {...}

darin eingeschlossen ist all das, was sich an DIVs auf dieser Website befindet und nicht größer skaliert werden soll, als auf meinem Bildschirm.

sini

Bin leider überfragt, sorry

sini

Hey

ich hab leider nicht allzu viel Ahnung vom programmieren.
Ich hab eine Website auf einem kleineren Bildschirm gestaltet und nun wird sie auf größeren Bildschirmen falsch dargestellt bzw. nicht wie gewünscht.

Wie kann man einstellen, dass die Website nicht weiter hoch skaliert wird?

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

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.

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

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

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

Beiträge von sini

verschiedene Bildschirmgrößen, verschiedene Anzeige

verschiedene Bildschirmgrößen, verschiedene Anzeige

verschiedene Bildschirmgrößen, verschiedene Anzeige

Hover-Effekt funktioniert nicht

Hover-Effekt funktioniert nicht

Hover-Effekt funktioniert nicht

Hover-Effekt funktioniert nicht

Hover-Effekt funktioniert nicht