nicht angemeldet
Bild vergrößern bei hover
0 
Matthias Apsel
Bild vergrößern bei hover
Der Martin
Matthias ScharwiesHi,
Ich würde gerne die Bilder, die im folgenden Code eingebunden sind, vergrößern, sobald man mit der Maus drüber fährt. Dabei soll sich das Bild dann über den Rest, also über die Schrift sowie die anderen Divs legen. Ich hoffe ihr könnt mir hier weiterhelfen.
<html>
<head>
<style type="text/css">
body{background-color: grey;}
#all {
margin: auto;
padding: 0;
width: 1094px;
}
.reihe1{
float: left;
margin-left: 50px;
margin-top: 50px;
height: 200px;
width: 450px;
background-color: #343434;
}
.reihe2{
float: left;
margin-left: 94px;
margin-top: 50px;
height: 200px;
width: 450px;
background-color: #343434;
}
.bild1{
border-radius: 5px;
height: 180px;
width: 180px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.text1{
float: left;
margin-left: 10px;
width: 250px;
height: 200px;
text-align: center;
color: white;
}
.name{
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
.titel{
font-size: 13px;
margin-top: 0px;
line-height: 20px;
}
.bild2{
border-radius: 5px;
height: 180px;
width: 180px;
float: left;
margin-right: 10px;
margin-top: 10px;
}
.text2{
float: left;
margin-right: 10px;
width: 250px;
height: 200px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div id="all">
<div class="reihe1">
<img src="bild.jpg" class="bild1" alt="">
<div class="text1">
<p class="name">Name</p><br>
<p class="titel">Titel</p></div>
</div>
<div class="reihe2">
<div class="text2">
<p class="name">Name</p><br>
<p class="titel">Titel</p></div>
<img src="bild2.jpg" class="bild2" alt="">
</div></div>
</body>
</html>
Danke schonmal!
-
Om nah hoo pez nyeetz, Alexander77!
Ich würde gerne die Bilder, die im folgenden Code eingebunden sind, vergrößern, sobald man mit der Maus drüber fährt. Dabei soll sich das Bild dann über den Rest, also über die Schrift sowie die anderen Divs legen. Ich hoffe ihr könnt mir hier weiterhelfen.
Das heißt, nachfolgender Inhalt soll sich nicht um das Bild kümmern. Das erreichst du mit absoluter Positionierung.
siehe auch Zusammenpiel von float, display und position
Matthias
-
Hi,
danke für deine Hilfe, aber irgentwie mag das nicht so ganz klappen. Egal ob ich postion:relative oder absolute einsetze wird der Text verschoben und nicht vom Bild überlagert. Wo liegt mein Fehler?-
Hallo,
gib uns bitte einen Link zu der Seite, sonst arten die Antworten in dumpfes stumpfes Raten aus.
Gruss
MrMurphy
-
ich habe zum Quellcode des ersten Posts lediglich folgendes hinzugefügt:
.bild1:hover{ border-radius: 5px; height: 300px; width: 300px; postion: absolute; }-
Hi,
ich habe zum Quellcode des ersten Posts lediglich folgendes hinzugefügt:
.bild1:hover{
border-radius: 5px;
height: 300px;
width: 300px;
postion: absolute;
}manchmal wirkt die richtige Schreibweise schon Wunder, denn CSS legt fest, dass unbekannte Eigenschaften oder fehlerhafte Definitionen ignoriert werden sollen. Dein Schreibfehler hätte dir eigentlich spätestens durch das Syntax-Hilighting hier auffallen müssen. Ciao, Martin -- Vielseitigkeit: Von vielen Dingen keine Ahnung haben. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Oh, das war nur ein Schreibfehler hier im Forum. Im Script hatte ich es richtig. Hier jetzt nochmal der komplette Quellcode:
<html> <head> <style type="text/css"> body{background-color: grey;} #all { margin: auto; padding: 0; width: 1094px; } .reihe1{ float: left; margin-left: 50px; margin-top: 50px; height: 200px; width: 450px; background-color: #343434; } .reihe2{ float: left; margin-left: 94px; margin-top: 50px; height: 200px; width: 450px; background-color: #343434; } .bild1{ border-radius: 5px; height: 180px; width: 180px; float: left; margin-left: 10px; margin-top: 10px; } .text1{ float: left; margin-left: 10px; width: 250px; height: 200px; text-align: center; color: white; } .name{ font-weight: bold; font-size: 14px; line-height: 20px; } .titel{ font-size: 13px; margin-top: 0px; line-height: 20px; } .bild2{ border-radius: 5px; height: 180px; width: 180px; float: left; margin-right: 10px; margin-top: 10px; } .text2{ float: left; margin-right: 10px; width: 250px; height: 200px; text-align: center; color: white; } .bild1:hover{ border-radius: 5px; height: 300px; width: 300px; position: absolute; } </style> </head> <body> <div id="all"> <div class="reihe1"> <img src="bild.jpg" class="bild1" alt=""> <div class="text1"> <p class="name">Name</p><br> <p class="titel">Titel</p></div> </div> <div class="reihe2"> <div class="text2"> <p class="name">Name</p><br> <p class="titel">Titel</p></div> <img src="bild2.jpg" class="bild2" alt=""> </div></div> </body> </html>
-
-
Hallo
wir wollen ja gerne helfen. Aber dazu müssen uns auch die notwendigen Informationen bereitgestellt werden. Mit deinen Quellcodeschnipseln ist eine konkrete Hilfe schlicht nicht möglich.
Ich kann dir deshalb nur zeigen wie ich das lösen würde. Die CSS-Angaben dazu befinden sich im head-Bereich des HTML-Quelltextes unter /* Ab hier folgen die seitenspezifischen Angaben */. Es sind grade mal acht Angaben erforderlich - und da ist gleich ein Transition drin.
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_07_06_alexander77_01_hover_problem.html
Gruss
MrMurphy
-
Ich kann dir deshalb nur zeigen wie ich das lösen würde. Die CSS-Angaben dazu befinden sich im head-Bereich des HTML-Quelltextes unter /* Ab hier folgen die seitenspezifischen Angaben */. Es sind grade mal acht Angaben erforderlich - und da ist gleich ein Transition drin.
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_07_06_alexander77_01_hover_problem.html
http://foreninfo.bplaced.net/seiten_fremdprobleme/
Da sind ja haufenweise perfekte Lösungen für immer wieder nachgefragte Probleme.
Hättest du Lust, diese im Wiki zu veröffentlichen: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxisbzw. wärst du einverstanden, dass deine Beispiele für Wiki-Artikel verwendet würden?
Gruss
MrMurphyLG Matthias
-
Hallo
Hättest du Lust, diese im Wiki zu veröffentlichen:
Dazu habe ich keine Zeit. Zudem habe ich mehr Spass daran einzelne Probleme konkret und praktisch zu lösen.
bzw. wärst du einverstanden, dass deine Beispiele für Wiki-Artikel verwendet würden?
Damit habe ich kein Problem. Das sind schließlich alles Lösungen, die ich für Fragen in verschiedenen Foren ersonnen habe. Wobei in der Regel nur HTML und CSS regelkonform angewendet werden.
Die Problemlösungen kann also jeder nutzen und übernehmen.
Gruss
MrMurphy
-
Hättest du Lust, diese im Wiki zu veröffentlichen:
bzw. wärst du einverstanden, dass deine Beispiele für Wiki-Artikel verwendet würden?
Damit habe ich kein Problem. Das sind schließlich alles Lösungen, die ich für Fragen in verschiedenen Foren ersonnen habe. Wobei in der Regel nur HTML und CSS regelkonform angewendet werden.
Die Problemlösungen kann also jeder nutzen und übernehmen.
Vielen Dank! Werde ich in den nächsten Wochen (mit Deiner Namensnennung) erledigen.
Gruss
MrMurphy
LG Matthias
-
-
-
-
-
-
-
