Alexander77: Bild vergrößern bei hover

Beitrag lesen

SELF-Forum

Bild vergrößern bei hover

Alexander77
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln