Schneller Tipp Perfekt positionierte Plusses

Wir platzieren drei unserer Figuren, eine für jedes Miniaturbild, in einer eigenen Spalte.

Diese Bilder sind zu groß. Um zu verhindern, dass sie aus ihren Spalten platzen, geben Sie ihnen eine maximale Breite, indem Sie eine klassische Regel für flüssige Bilder anwenden:

 Abbildung img max-width: 100%; 

Ein guter Anfang. Wir haben unser flüssiges Layout mit drei Spalten, von denen jede ein Bild enthält, das irgendwo verlinkt wird.

Schritt 3: Schwebeflugzustand

Machen wir den Benutzern klar, dass das Klicken auf die Bilder etwas bewirkt. Wir fügen einen Hover-Status hinzu, der die Deckkraft der Miniaturansicht verringert:

 Abbildung a: hover img Opazität: 0,4; Filter: Alpha (Deckkraft = 40); / * IE6-IE8 * /

Schritt 4: Symbol

Nun zu dem alles wichtigen Symbol. Wir möchten, dass ein Symbol, das sich in der Mitte der Miniaturansicht befindet, sichtbar wird, wenn das Bild über das Bild gezogen wird. Es kann ein beliebiges Symbol sein, aber es sollte dem Benutzer anzeigen, was passieren wird. In dieser Demonstration werde ich der Einfachheit halber nur eine verwenden + signieren, um eine größere Version vorzuschlagen.

Wir fügen es mit dem Pseudo-Element in die Mischung ein :Vor:

 a.enlarge: before content: "+"; Bildschirmsperre; Schriftgröße: 40px; Zeilenhöhe: 1em; Höhe: 1em; Breite: 1em; Text ausrichten: Mitte; Farbe: #fff; Schriftdicke: fett; Position: absolut; z-Index: 100; 

Wir haben unsere platziert + als generiertes Element: vor dem Element ein Teil des Ankers, der das Bild umgibt. Wir verwenden die Klasse "Vergrößern", um die Anker zu identifizieren, die die benötigen +. Wenn wir ein anderes Symbol benötigen, können wir einen anderen Klassennamen verwenden.

Zunächst müssen wir den Inhalt diktieren + Zeichen) und geben an, dass es sich um ein Block-Level-Element handelt.

Wichtig! Die folgenden Regeln bestimmen dann die Abmessungen. Wir haben gesagt, dass die Schriftgröße 40px ist. Dann haben wir gesagt, dass die Zeilenhöhe, die Höhe und die Breite alle 1em (40px) entsprechen. Dies hat ein Quadrat von 40x40px erzeugt. Indem wir die Textausrichtung auf Mitte und die Zeilenhöhe auf 1em einstellen, werden wir Garantie dass der Charakter in der vertikalen und horizontalen Mitte unseres Platzes sitzt.

Die nächsten wichtigen Regeln sind die absolute Positionierung (0px, standardmäßig 0px) und der Z-Index, der die Stapelreihenfolge unserer positionierten Elemente bestimmt. Wenn Sie diesen Wert auf 100 setzen, können wir sicherstellen, dass unsere anderen Elemente darauf sitzen. Lass uns das jetzt tun ...

 Abbildung img max-width: 100%; Position: relativ; z-Index: 900;  Abbildung a Position: relativ; Bildschirmsperre; Zeilenhöhe: 0px; Textdekoration: keine; 

Hier haben wir dafür gesorgt, dass die img-Tags auf der + Setzen Sie den z-Index auf über 100. Damit dies wirksam wird, müssen Sie einen Positionierungstyp angeben (in diesem Fall "relativ"). Unser Anker hat auch Position: relativ was bedeutet das + icon ist jetzt absolut dagegen positioniert.

Sie werden auch einige andere Stile bemerken, die dem Anker hinzugefügt wurden. Wir haben es als Block dargestellt, alle Unterstriche entfernt und eine Linienhöhe von 0px erhalten. Die Zeilenhöhe ist wichtig und wenn nicht zurückgesetzt, kann sich dies als zusätzliche Auffüllung am unteren Rand des Elements manifestieren. Wir haben jetzt dafür gesorgt, dass der Anker eng am Bild anliegt.

Unsere Icons sind eigentlich immer präsent, aber sie werden nur sichtbar, wenn das Bild, das sie überdeckt, angezeigt wird.

Schritt 5: Richtige Positionierung

Im Moment sind unsere Icons als Standard in der oberen linken Ecke unserer Anker positioniert. Wir brauchen sie in der Mitte der Miniaturansichten, unabhängig davon, wie groß die Miniaturansichten sind. Dann positionieren wir sie 50% von links und 50% von oben. Arbeit erledigt, richtig?

 a.enlarge: before content: "+"; Bildschirmsperre; Schriftgröße: 40px; Zeilenhöhe: 1em; Höhe: 1em; Breite: 1em; Text ausrichten: Mitte; Farbe: #fff; Schriftdicke: fett; Position: absolut; Spitze: 50%; links: 50%; z-Index: 100; 

Hmm. Nicht wirklich. Das Symbol befindet sich nicht in der Nähe der Mitte der Miniaturansicht. Dies liegt daran, dass Elemente in Bezug auf ihre obere linke Ecke ausgerichtet sind. Schau nochmal:

Um die Positionierung auszugleichen, müssen wir sie um die Hälfte nach oben und die Hälfte nach links verschieben. Wir haben früher die Ems verwendet, um die Dimensionen zu bestimmen (1em = 40px), also verwenden wir 0.5em (die Hälfte der Breite des Quadrats), um die Verschiebung durchzuführen. Auf diese Weise bleiben alle Messungen proportional, auch wenn wir die Schriftgröße ändern. Vielen Dank an Gabri für den Hinweis auf die Verwendung von ems!

 a.enlarge: before content: "+"; Bildschirmsperre; Schriftgröße: 40px; Zeilenhöhe: 1em; Höhe: 1em; Breite: 1em; Text ausrichten: Mitte; Farbe: #fff; Schriftdicke: fett; Position: absolut; Spitze: 50%; links: 50%; z-Index: 100; Marge: -0,5em 0 0 -0,5em; 

Dafür verwenden wir eine negative Marge. -0.5em oben und links erledigt die Arbeit. Stellen Sie sich ein Vakuum vor, in das unser Element gesaugt wird.

Bingo! Unsere + icon ist perfekt in der Mitte unserer Miniaturansicht positioniert. Versuchen Sie, die Größe des Browsers zu ändern, er bleibt genau im Mittelpunkt.

Warum nimmst du den Effekt nicht weiter??

Es gibt viele Möglichkeiten für eine Technik wie diese:

• Verwenden Sie die Websymbols-Schriftart und bringen Sie Ihre Icons ein wenig auf.
• Wenden Sie je nach Symbol, das Sie anzeigen möchten, verschiedene Klassen auf Ihre Miniaturbilder an.
• Warum nicht CSS-Übergänge hinzufügen, um den Hover-Effekt zu glätten?

Fazit

Für erfahrene CSS-Spieler ist dies ein sehr einfacher Trick, aber wenn Sie noch nie über eine solche Positionierung nachgedacht haben, hoffe ich, dass dieser Schnelltipp hilfreich war.