• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hover Bild --> Text

B

bobomampf

Mitglied
Hey,
ich habe ein Problem und möchte dieses gerne mit CSS lösen.. Nur im Notfall per Javascript oder Jquery..

Ich habe ein Produktbild.. Bei einem Hover von diesem soll das Bild komplett weiss werden und dann bei jedem die gleiche Beschreibung kommen. Nur die Artikelnummer soll bei jedem Bild anders sein.

Wie kann ich das umsetzen? Habt ihr mir da nen guten Rat?
 
HTML: 
<!DOCTYPE html>
<html>
 <head>
  <style>
   html, *
   {
     pading:0;
     margin: 0;
   }
   .text
   {
     z-index: 0;
     position: relative;
     margin-left: 100px;
     margin-top: 100px;
     width: 100px;
   }
   .bild
   {
     position: absolute;
     left: 0;
     top: 0px;
     z-index: 20;
   }
   .text:hover .bild
   {
     display:none;
   }
  </style>
 </head>
 <body>
  <div class="text">
   lalalala<br />lalalalal<br />
   <div class="bild"><img src="fsd.png" alt="bild" /></div>
  </div>
 </body>
</html>
 
Da war jemand schneller.
Aber wo ich es schonmal geschrieben hab, geb ich dir auch noch die alternativlösung ohne position ;)

Guckst du live hier: Testseite

und hier der code:
Code: 
.testp{
	margin:0;
	padding:0;
	width:150px;
	height:150px;
	overflow:hidden;
	background-color:#ffffff;
}

.testp:hover{
	margin-top:-150px;
	height:300px;
}

.testdiv{
	overflow:hidden;
        width:150px;
        height:150px;
}
HTML: 
<div class="testdiv">
	<p class="testp">
	<img src="bild.jpg" alt="testbild">
	Testtext
	</p>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben