Mouse Over Effekt über Img

[norah]

Hallo an alle,

ich baue mir gerade meine Website und bin leider ein ziemlicher newbie.

Habe auch schon viel rumgesucht, aber leider nur topics gefunden, die Bilder komplett highlighten.

Meine Problematik:
Ich würde gerne eine Seite mit meinen Referenzen schalten, welche ebendiese als Bilder beinhaltet.
On MouseOver wäre es nun sehr cool, wenn über ca. einem Viertel des Referenzbildes ein (u.U. sogar halbtransparenter) Balken mit dem Namen des Projektes darin auftauchen würde.

Ich habe die Referenzbilder wie folgt eingebunden:

<div id="referenzen">
<a href="#"><img src="web/images/bild_1.JPG" alt="bild1" name="bild1"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild2" name="bild2"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild3" name="bild3"/></a>
</div>

Könnt ihr mir hier helfen? Oder möchte ich viel zu viel und es geht gar nicht mit CSS?!

danke euch schon mal
norah

[Steel]

Hi!

Viele Wege fuehren nach Rom.

Der in meinen Augen einfachste waere, Sprites als Hintergrundgrafik zu benutzen. Es geht aber auch mit einzelnen Grafiken als Hintergrund.

Hierfuer erstellst du fuer jede Grafik einen Hoverzustand und sorgst dafuer, dass beim hovern dieser Zustand gezeigt wird. Das geht indem Du die komplette Hintergrundgrafik austauscht, aber da musst Du mit Ladezeiten beim Hovern rechnen. Wenn Du Sprites benutzt hast Du zumindest die Grafik und deren Hoverzustand in einem File (uebereinander oder untereinander) und vechiebst beim Hovern lediglich den Anzeigebereich.

Um die Links ausreichend gross zu gestalten musst du sie per CSS aufspannen. Hierfuer wuerde ich display: inline-block vorschlagen. Damit  hast du manipulierbare Blockelemente, die sich aber wie normale Inlineelemente (z.b. Links) verhalten.

Hope it helps.

[Gunnar Bittersmann]

@@norah:

nuqneH

Ich habe die Referenzbilder wie folgt eingebunden:

<div id="referenzen">
<a href="#"><img src="web/images/bild_1.JPG" alt="bild1" name="bild1"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild2" name="bild2"/></a>
<a href="#"><img src="web/images/bild_1.JPG" alt="bild3" name="bild3"/></a>
</div>

Die Werte der @name-Attribute sollen die anzuzeigenden Namen der Projekte sein? Das wird wohl nichts. Du brauchst den Neman als Inhalt eines Elements. AFAIS dürfen 'img'-Elemente auch in HTML5 keine @name-Attribute mehr haben.

Außerdem: Eine Liste ist eine Liste ist eine Liste! Eine sinnvolle Auszeichnung wäre:

<ul id="referenzen">  
  <li>  
    <a href="projekt1">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 1</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    ⋮  
  </li>  
</ul>

Im Stylesheet sorgst du dafür, dass 'figcaption' initial nicht zu sehen ist, sondern erst, wenn man über das Bild hovert:

#referenzen  
{  
	list-style: none;  
	overflow: hidden;  
}  
  
#referenzen li  
{  
	float: left;  
}  
  
#referenzen figure  
{  
	margin: 0;  
	overflow: hidden;  
	position: relative;  
}  
  
#referenzen a, #referenzen img  
{  
	color: black;  
	display: block;  
}  
  
#referenzen figcaption  
{  
	background: rgba(255, 255, 255, 0.5);  
	left: -10000px;  
	padding: 1em;  
	position: absolute;  
	top: 0;  
	width: 100%;  
}  
  
#referenzen a:hover figcaption  
{  
	left: 0;  
}

Qapla'

[Der Martin]

Hallo Gunnar,

Du brauchst den Neman als Inhalt eines Elements.

WEN bitte? :-)

*scnr*
 Martin

[norah]

Hallo Gunnar,
danke dir erstmal für die ausführliche Antwort. Ich habe das ganze jetzt mal eingebunden und es funktioniert auch einwandfrei.
Nur ergibt sich nun ein anderes Problem daraus.

Anfangs war das ganze auch noch eingerückt, was wohl an dem li tag liegt. Das habe ich auch mit padding hinbekommen, jetzt ist nichts mehr eingerückt

Ich hätte aber gerne 3 Bilder/Referenzen nebeneinander. Gerade umbricht es aber nach dem zweiten Bild und ich finde einfach nicht heraus, wie ich das umgehen kann.

Habe die Bilder und Größe bzw. Auflösung meiner Website schon zig mal ver- und abgeglichen und hier dürfte es Größenmäßig kein Problem geben.

Hast du einen Tipp?

Liebe Grüße
Norah

[Gunnar Bittersmann]

@@norah:

nuqneH

Hast du einen Tipp?

Ja.

Qapla'

[norah]

@gunnar

ok, sorry :-(
momentan stehen nur zwei Referenzen nebeneinander obwohl drei auf jeden fall passen müssten. (hab ich nochmals per screenshot ausgemessen)

Ich habe versucht:
-float:left im CSS
-dem div referenzen eine width von 924px zu geben
-<nobr> nach <ul id="referenzen"> und nach dem dritten </li> element
-whitspace:"nowrap" und einem <br> nach der dritten Referenz im html (das steht jetzt noch im code)

Leider führt alles zum selben Ergebnis --> nach der zweiten Referenz wird umbrochen.

Mein html Code sieht nun so aus:

<ul id="referenzen">  
  <li>  
    <a href="projekt1">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 1</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    <a href="projekt2">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 2</figcaption>  
      </figure>  
  </li>  
  <li>  
    <a href="projekt3">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 3</figcaption>  
      </figure>  
      <white-space="nowrap">  
  </li>  
   <br>  
  <li>  
    <a href="projekt4">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 4</figcaption>  
      </figure>  
    </a>  
  </li>  
  <li>  
    <a href="projekt5">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 5</figcaption>  
      </figure>  
  </li>  
  <li>  
    <a href="projekt6">  
      <figure>  
        <img src="web/images/bild_1.JPG"/>  
        <figcaption>Projekt 6</figcaption>  
      </figure>  
  </li>  
</ul>

mein css so:

#referenzen  
{  
        list-style: none;  
        overflow: hidden;  
		margin: 0 0 8px 0;  
		padding: 0;  
		float:left;  
}  
  
#referenzen li  
{  
        float: left;  
		margin: 8px 8px 8px 0;  
}  
  
#referenzen figure  
{  
        margin: 0;  
        overflow: hidden;  
        position: relative;  
}  
  
#referenzen a, #referenzen img  
{  
        color: black;  
        display: block;  
}  
  
#referenzen figcaption  
{  
        background: rgba(255, 255, 255, 0.5);  
        left: -10000px;  
        padding: 1em;  
        position: absolute;  
        top: 0;  
        width: 100%;  
}  
  
#referenzen a:hover figcaption  
{  
        left: 0;  
}  

ich hoffe das war jetzt besser erklärt und zeigt, dass ichs versucht hab.
lg norah

[Gunnar Bittersmann]

@@norah:

nuqneH

ich hoffe das war jetzt besser erklärt und zeigt, dass ichs versucht hab.

Nicht wirklich. Es ist nicht zu sehen, wo das denn reinpassen soll.

Am besten verlinkst du mal die fragliche Seite.

Qapla'

[norah]

ohje, sorry!!!

Also ich hab hier mal den Link zu der Seite: http://differentkettleoffish.de/information_architecture_references.html

Ist mit Sicherheit nicht sauber programmiert, nehme ich an, aber ist meine erste Seite!

Danke für deine Mühe.
lg nora

[Gunnar Bittersmann]

@@norah:

nuqneH

Ist mit Sicherheit nicht sauber programmiert

Weder sauber noch programmiert. (HTML und CSS sind keine Programmiersprachen.)

Beseitige die Fehler, vorher brauchst du dich über die Darstellung nicht wundern.

Qapla'

[norah]

Hallo Gunnar,

"Beseitige die Fehler, vorher brauchst du dich über die Darstellung nicht wundern."

--> habe ich gemacht, aber die Markup Validation zeigt noch immer 12 Fehler an zu Figure und Figcaption...

hier: hier

ich habe versucht das ganze zu googlen habe aber nur infos darüber gefunden, dass die zwei tags html5 tags sind, nicht aber wie ich die fehler beheben könnte bzw. was falsch ist...

Kannst du mir erklären, was ich daran ändern muss?
lg

[Gunnar Bittersmann]

@@norah:

nuqneH

Kannst du mir erklären, was ich daran ändern muss?

Wenn du HTML5 schreiben willst: <!DOCTYPE html>

Qapla'

[norah]

Ohje jetzt habe ich grad gesehen dass (wenn überhaupt)<white-space="nowrap"> ja nach dem zweiten Referenz- bzw. Listenelement stehen müsste und bei <br> noch ein / fehlt.

Aber auch nach der Korrektur funktionierts nicht :-(