CSS Bild nach 'float:none' unsichtbar

FERNman

Guten Abend!

Dies ist mein erster Beitrag auf dem Forum, da ich auch erst mit HTML angefangen habe.

Naja, mein Problem ist folgendes: Ich habe eine Website, die sich auf Handys anpassen soll. Dabei habe ich drei Bilder bzw. Links und Text (siehe JSFiddle für Verständnis), die nebeneinander sind. Das mache ich natürlich mit float: left.
Wenn die Website nun allerdings auf einem Gerät aufgerufen wird, dessen Displayweite kleiner als 1200px ist, sollen sie untereinander sein. Das müsste doch mit float:none gehen oder?

Ich poste hier den wichtigen Quelltext, ein Link zu einem Life-Beispiel mithilfe von jsfiddle folgt:

HTML-Datei:

HTML

<a class="BigImage" href="b3d.html" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg')">                        
                    <div class="BigImageOver">
                        <div class="BigImageText">
                           <h3>Titel #1</h3>
                            <p>
                                Text Test Text Eins </br>
                               Text Test Text Eins Text Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text EinsText Test Text                                          EinsText Test Text Eins
                            </p>
                        </div>
                    </div>
                </a>


                <a class="BigImage Second" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg');" href="#">
                    <div class="BigImageOver">
                        <div class="BigImageText">
                            <h3>Titel #2</h3>
                            <p>
                                Text Test Zwei </br>
                               Text Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test ZweiText Test Zwei
                            </p>
                        </div>
                    </div>
                </a>


               <a class="BigImage Second" style="background-image:url('http://static.single.de/beitrag/1422142/1_org.jpg');" href="#">
                   <div class="BigImageOver">
                       <div class="BigImageText">
                            <h3>Titel #3</h3>
                            <p>
                                Text Test Drei </br>
                            Text Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test DreiText Test Drei
                            </p>
                        </div>
                    </div>
                </a>

Alles anzeigen

Css-Datei:

Code

.BigImage {    color: rgb(255, 255, 255);
    width: 360px;
    height: 360px;
    box-shadow: 0px 1px 2px rgb(10, 0, 0);
    border-bottom: 1px solid rgb(10, 0 ,0);
    float: left;
    background-size: 100% 100%;
    background-color: white;
}




.BigImageOver {
    opacity: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);




    transition: opacity .30s ease-in-out;
   -moz-transition: opacity .30s ease-in-out;
   -webkit-transition: opacity .30s ease-in-out;
}




.Second {
    margin-left: 2%;
}




.BigImageText {
    opacity: 0;
    text-align: center;
    width: 100%;
    height: 100%;

    transition: opacity .30s ease-in-out;
   -moz-transition: opacity .30s ease-in-out;
   -webkit-transition: opacity .30s ease-in-out;
}




.BigImageText h3 {
  padding-top: 5%;
  margin-top: 0%;
  padding-bottom: 5%;
  color: white;
  border-bottom: 1px solid #cccccc;
  font-size: 30px;
}




.BigImageText p {
  color: white;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 1%;
}




.BigImageText a {
  margin-left: 1%;
  font-family: "Lato";
  font-size: 18px;
  color: white;
}




.BigImage:hover .BigImageOver{
    opacity: 0.7;
}




.BigImage:hover .BigImageText{
    opacity: 1;
}




@media (max-width: 1200px) {
    .BigImage {
        margin-left: auto;
        margin-right: auto;
        width: 360px;
        height: 360px;
        float: none;
    }




    .Second {
        margin: 0%;
    }




    .BigImageText h3 {
        padding-top: 2%;
        padding-bottom: 2%;
    }
}

Alles anzeigen

JSFiddle:
http://jsfiddle.net/FERNman/bqmrq2mh/

Verstehe nicht, warum es nicht geht bzw. die Größe des BigImage divs automatisch auf auto und somit auf 0x0 Pixel gesetzt wird. Achja, und kann mir bitte jemand sagen, warum der <p> Bereich die Opacity von .BigImageOver übernimmt?

Hoffe ihr könnt mir helfen,

MFG und Danke im Voraus!
FERNman

Tags