Beim Mouseover etwas anzeigen!

[Dschenschi]

Hallo zusammen!

Und zwar habe ich im Unterricht den Auftrag bekommen, eine Homepage von unserer Klasse zu erstellen.
Habe mir jetzt so ein paar Seiten erstellt und möchte nun ein bisschen Dynamik in die Sache hineinbringen.

Dazu habe ich mir Folgendes überlegt:
(s. Anhang!)
Und zwar habe ich von jedem Schüler ein Foto, das ich schon retuschiert und rund angelegt habe.
Diese würde ich gern entweder :
-> auf der linken Seite platzieren
-> oder abwechselnd linke/rechte Seite.

Wenn man die Seite öffnet, sollen lediglich die Fotos zu sehen sein, mehr nicht.
Wird dann die Maus über das Foto bewegt, soll dann auf der jeweils anderen Seite vom Foto ein großer Pfeil (würde ich als JPEG Datei anlegen) erscheinen und daneben der zugehörige Name zum Schüler.
Also wirklich nur beim Rüberfahren mit der Maus soll der Name + Pfeil angezeigt werden.

Wie muss ich mit der .css und der .html Datei arbeiten, um diesen Effekt zu erreichen?
Ist das sehr kompliziert? Für viele ist es die erste Annäherung an HTML, ich habe nur einen kleinen Grundbausatz, den ich halt gern erweitern würde. Oder ist das für jemanden als Anfänger zu schwierig?
Habe zwar schon hinbekommen, dass der Text erscheint, allerdings entweder UNTER dem Foto oder so weit rechts davon, dass es am Rand vom Browserfenster erscheint. :(

Liebe Grüße und guten Morgen zusammen ;-)
Dschenschi

 

[nookie]

Hier wäre eine Möglichkeit es zu lösen. Auf den Pfeil kannst du ja das selbe Prinzip anwenden, ansonsten beschäftige dich mal mit jQuery.

 

[Dschenschi]

Hier wäre eine Möglichkeit es zu lösen. Auf den Pfeil kannst du ja das selbe Prinzip anwenden, ansonsten beschäftige dich mal mit jQuery.

Danke dir! Ja, das entspricht dem, was ich suche :-) Problem ist nur, dass ich jetzt noch wissen müsste, womit ich die Schrift rüber auf die rechte Seite von dem Kreis kriegen kann..Also, mit welchen Angaben.:)

 

[nookie]

Danke dir! Ja, das entspricht dem, was ich suche :) Problem ist nur, dass ich jetzt noch wissen müsste, womit ich die Schrift rüber auf die rechte Seite von dem Kreis kriegen kann..Also, mit welchen Angaben.:)

Das werde ich dir nicht verraten, denn ein bisschen Eigenarbeit ist schon notwendig. Alles was du an CSS brauchst, findest du mit 100%iger Sicherheit über Google.

 

[Dschenschi]

Das werde ich dir nicht verraten, denn ein bisschen Eigenarbeit ist schon notwendig. Alles was du an CSS brauchst, findest du mit 100%iger Sicherheit über Google.

Okay, dann danke ich dir :-) Mit der div Box war mir schonmal sehr wichtig!

 

[Dschenschi]

Also, ich hab das jetzt mal getestet..Irgendwie möchte das mit dem Hover nicht so ganz funktionieren..

Also die <div class="circle"> habe ich noch um <img src="Bilder/xyz.png" width="300" height="300" alt=""> erweitert. Bild wird mir angezeigt - soweit so gut.
Aber bei <p class="name"> tut sich nichts.. also .circle:hover + .name {} wird kein Text angezeigt.
Und

.circle {
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
}
kann ich doch komplett weglassen, oder? Möchte mir ja keinen Kreis anzeigen lassen, sondern das Bild, das ja auch funktioniert.

Also HTML sieht bei mir so aus:
<div class="circle"> <img src="Bilder/XYZ.png" height:500px width:500px
</div>
<p class="name">
XYZ</p>

Und CSS:
.circle:hover + .name {
display:block;
}

.name {
display:none;
}

Was mache ich falsch :-(?

Liebe Grüße und schönen Start in die Woche!

Jenny

 

[nookie]

height="500px" width="500px"

statt

height:500px width:500px

Dein img-Tag hast du auch nicht ordnungsgemäß geschlossen.

Hier.

 

[threadi]

Ich würde für solche Fälle eher mit einem picture > figure-Konstrukt arbeiten. Damit wären die Bilder und ihre Beschriftungen auch semantisch besser ausgezeichnet.