Danke danke danke!
Was genau macht jetzt das position: relative?
Und das mit dem blur hatte ich auf die komplette div bezogen. Das blurred natürlich die komplette div
Mit dem speziellen "..img{ ..}" bezieht sich das anscheinend nur auf das Bild.
Danke danke danke!
Was genau macht jetzt das position: relative?
Und das mit dem blur hatte ich auf die komplette div bezogen. Das blurred natürlich die komplette div
Mit dem speziellen "..img{ ..}" bezieht sich das anscheinend nur auf das Bild.
Man muss dem Bild sowohl Breite als auch Höhe zuweisen, damit der Browser weiß, woran er es anpassen soll:
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:
<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:
*{
margin:0;
padding:0;
}
#div_pic01{
margin: 0 auto;
overflow: hidden;
border:0px solid black;
width: 60%;
height: 200px;
min-width: 300px;
}
#fig_pic01{
width:100%;
height:100%;
}
#div_pic01 a img{
width: 100%;
}
#div_pic01 a {
text-decoration:none;
}
#fig_pic01 #figcaption_pic01{
transition: none;
text-align:center;
margin-top:0px;
}
#fig_pic01:hover #figcaption_pic01{
transition: none;
margin-top:-100px;
text-align:center;
font-size:100px;
color: cyan;
}
#div_pic01 a img:hover{
-webkit-filter: blur(2px) ;
filter: blur(2px)
}
Alles anzeigen
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
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:
<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:
Alles anzeigenVerstehe dich nicht ganz was das soll.
Ein div 60 Prozent Breite geben und mittig stellen ist kein problem.
Das es responsiv ist ist es auch kein problem.
Du nutzt aber eine feste Höhe von 200px;
Das heist das alles im overflow:hidden verschwindet.
Ein height:auto geben wäre sinvoller.
https://codepen.io/basti1012/pen/VwYENab
Kuck mal hier und ändere das height:200px auf auto , ob das ehr passt was du willst.
Du könntest aber auch mal ein Link zum Bild schicken und sagen wo es eingebunden werden soll dann können wir dir vieleicht bessere Ideen geben.
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:
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:
Gruß,
Kickflip
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.