Beiträge von Kickflip

    Man muss dem Bild sowohl Breite als auch Höhe zuweisen, damit der Browser weiß, woran er es anpassen soll:


    https://codepen.io/Sempervivum/pen/KKwrdGB?editors=1100

    Wow! So soll es aussehen. Das versuche ich jetzt mal bei mir einzupflegen. Entschuldigt meine Dümmlichkeit, aber ich bin erst vor 3 Tagen mit HTML und CSS gestartet. :)


    Weiß jemand aus dem Stegreif, wie das mit dem Blur-Filter beim hovern ist und dem Text, der angezeigt werden soll, aber vor dem verschwommenen Bild.


    also mit


    CSS:

    Bei mir funktioniert das mit dem Text nicht :(

    Der Text wird auch von dem blur-Fliter angegriffen und ist deswegen verschwommen. Das soll nicht so sein



    HMTL:

    Code
    <div id="div_pic01"> 
              <figure id="fig_pic01">
                   <a href="bild01/bild01.html"> 
                     <img  src="bild01/01.jpg" alt="alternativer_text">
                     <figcaption id="figcaption_pic01">
                         Pizza und so BLA BLA BLA
                     </figcaption>
                   </a> 
              </figure>  
    </div>



    CSS:

    Hm, das mit dem Text hat mir auf jeden Fall schonmal gut geholfen. :) Danke


    Aber das andere soll schon so sein, dass das Bild dann nur als Ausschnitt gezeigt wird und je nachdem wie das Fenster gezogen wird mehr oder weniger sichtbar wird. Aber das Bild soll immer von der Mitte aus skalieren und nicht nicht von oben, wie das ist, wenn man bei


    Code
    img{
      width: 100%;
      height: auto;
    }


    einstellen. Das muss doch lösbar sein :)

    Und eine 2. Frage, neben der im Beitrag über hier, hätte ich zudem noch:


    ich möchte, wenn ich über das Bild oder den div hover einen Text anzeigen lassen.


    das funktioniert irgendwie nicht... habe das bislang so:


    HTML:


    Code
    <div id="div_pic01">
            <a href="www.google.de"> 
                  <img  src="1.jpg" alt="alternativer_text">
            </a>  
            <p id="text_pic01">ANGEZEIGTER TEXT BEIM HOOVERN</p>
    </div>


    CSS:

    Code
    #text_pic01{  
        position: relative;
        top: 50%;
        left:50%;
        visibility:hidden
    }
    
    #div_pic01:hover .text_pic08{
       visibility:visible;   
    }

    Danke! Das ist genau das was ich suche, aber das Bild soll immer horizontal und vertikal im "Rahmen" zentriert sein. Bei dir sieht man ja oben nur den Himmel. Die Mitte wäre ja, dass man auch ein bisschen grün sieht... weißt du was ich meine? :)


    und: meinte schon fixes 200px

    Hi,


    ich möchte ein Bild dynamisch in einer div so zentrieren, dass die Bildbreite immer der Breite des divs entspricht, welche ja immer 60% der Websitenbreite entspricht. Die Bildhöhe soll sich dabei immer dynamisch anpassen. und durch Hidden nicht angezeigt werden.

    Eigentlich sollte das einfach sein, aber irgendwie funktioniert das so nicht, wie ich das will... möchte das eigentlich so gut es geht in CSS lösen.


    Weiß nicht genau, was ich jetzt dem Bild sagen muss, damit es das tut, was ich möchte.


    HTML:

    Code
    div id="div_pic01" style="overflow: hidden; width: 60%; height: 200px">  
               <a href="www.google.de"> <img id="pic01" src="1.jpg" alt="alternativer_text"/> </a> 
    </div>



    CSS:

    Code
    #div_pic01{
      text-align: left;
      margin: 0 auto;  
    }
    
    #pic01{
        ????
    }


    Gruß,


    Kickflip