CSS3 HoverEffekts für Bilder mit Content

[nettesekel]

Einer unserer User hat kürzlich diesen netten CSS3-Hover-Effekt im Web gefunden und ich erkläre nun kurz, wie man diesen Effekt in seine NOF-Projekte einbinden kann.

Dass die Einbindung in NOF möglich ist und wie das Ganze dann aussieht, könnt ihr in diesem Beispielprojekt ansehen und testen.

http://demos.nof-community.de/CSS3HoverEffekts/index.html

[nettesekel]

Vorab möchte ich darauf hinweisen, dass die Darstellung dieses Effekts nicht in jedem Browser gleichermaßen funktioniert. Unter HTML4.01 klappt im FireFox alles bestens im IE allerdings gibt es massive Darstellungsprobleme.
Eine Publizierung unter dem Doctype LOOSE hat in meinem Beispielprojekt Abhilfe geschaffen. (es steht euch frei auch andere Doctypen auszuprobieren)

Relevant für NOF9, NOF10, NOF11 und frühere Versionen

Bis einschließlich NOF 11 solltet ihr für die Publizierung von DocType LOOSE die DocTypeKomponente von SwissKnife nutzen.

Die Komponente könnt ihr hier downloaden.

Die Installation der Komponente ist hier beschrieben: http://www.nof-academy.de/SwissKnife-Tutorials/Installation/

Und eine Anleitung dazu, wie ihr sie benutzen könnt, findet ihr hier: http://www.nof-academy.de/SwissKnife-Tutorials/DocType/index.html

Bitte keien Scheu, das Ganze hört sich viel an, ist aber schnell erledigt und überhaupt nicht kompliziert.


Relevant für NOF12 und NOF13

Wer NOF12 oder 13 nutzt, kann den DocType Loose ohne Hilfsmittel generieren. Wählt hierzu einfach die HTML-Ausgabe HTML4.01 oder 4.01 with Tables und deaktiviert den Quirksmodus. Wie das geht, zeigt der folgende Screenshot...

[nettesekel]

Zunächst solltet ihr euch die benötigten Bilder auf das passende Maß zuschneiden.
Wenn ihr keine UMfangreichen Änderungen am CSS-Code machen möchtet sollten die Bilder eine Größe von 283x164px haben. Bindet diese Bilder als Assets in euer Projekt ein. Eine Anleizung zu diesem Vorgang findet ihr hier: http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/


Imnächsten Schritt fügt ihr die Styleangaben in euer Projekt ein. Da man den Effekt sicher nicht im kompletten Projekt nutzen wird und NOF u.U. mit einigen der Styleangaben Probleme hat, wenn wir sie im Design einbinden, würde ich empfehlen, diese Angaben direkt in die Seite zu integrieren, auf welcher der Effekt genutzt werden soll.

Öffnet also die Seite eurer Wahl und fügt den folgenden Code ins Layout-HTML zwischen den Head-Tags ein. (solltet ihr das Ganze doch auf mehreren Seiten nutzen wollen, könnt ihr den Code auch im Masterrahmen-HTML platzieren)
Wer nicht weiß, wie man Code zwischen den Head-Tags einer Seite einfügt, findet hier eine Anleitung/Erklärung dazu: www.nof-community.de/index.php/topic,851.0

Code: HTML5

1. <style type="text/css">
2. .our_menu{width:970px; margin:0 auto;}
3. ul,li{margin:0;padding:0;list-style:none}
4. .menu .item{float:left;position:relative}
5. .menu .item .new{background-position:-248px -482px;height:28px;left:-9px;padding:7px 0 0 7px;top:41px;width:55px; background:#F00;color:#FFF;display:block;font-family:"league-gothic",sans-serif;font-size:18px;position:absolute;text-transform:uppercase;z-index:1; }
6. .menu .item a{background-color:#FFF;color:#820922;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
7. .menu .item a:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
8. .menu .item:hover .new{z-index:3}
9. .menu .item a h3{border:0;font-family:"league-gothic",sans-serif;font-size:18px;margin:0 0 .5em 0;padding:0;text-transform:uppercase; }
10. .menu .item a p{color:#432;font-size:16px;}
11. .our_menu .menu{float:left;margin:0 0 50px 0}
12. .our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
13. .our_menu .menu .item a{height:25px;padding:114px 0 0 14px;top:20px;width:295px;text-decoration:none;}
14. .our_menu .menu .item a:hover{height:145px;padding-top:179px}
15. .our_menu .menu .item a img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
16. .our_menu .menu .item a:hover img{clip:auto}
17. .our_menu .menu .item .new{left:-1px}
18. a img {border:none;}
19. </style>

[nettesekel]

Nun muss nur noch der Code für die Bild/Text-Boxen in eurer Seite platziert werden. Fügt hierzu ein Textfeld in eure Seite ein und platziert es dort, wo die Boxen erscheinen sollen. Ihr müsst das Textfeld nicht unbedingt in die Höhe oder Breite ziehen.

Zunächst solltet ihr euch den nachfolgenden Code in euren Editor kopieren und euren Bedürfnissen entsprechend bearbeiten. (Erklärung im nachfolgenden Post) Wenn ihr damit fertig seid, kopiert ihr den fertigen Code und fügt ihn nun nach dieser Anleitung https://www.nof-community.de/index.php/topic,47.0 in das Textfeld ein.

Code: HTML5

1. <div class="our_menu">
2.             <ul class="menu">
3.                     <li class="item">
4.                        <strong class="new">new</strong>
5.                           <a href="https://www.nof-community.de/index.php?action=impressum">
6.                             <h3>Lorem ipsum dolor</h3>
7.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
8.                             <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">
9.                          </a>
10.                     </li>
11.                     <li class="item">
12.                        <strong class="new">new</strong>
13.                        <a href="https://www.nof-community.de/index.php?action=impressum">
14.                      <h3>Lorem ipsum dolor</h3>
15.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
16.                             <img src="./assets/images/2.png" height="164" width="283">
17.                         </a>
18.                     </li>
19.                     <li class="item">
20.                           <strong class="new">new</strong>
21.                        <a href="https://www.nof-community.de/index.php?action=impressum">
22.                             <h3>Lorem ipsum dolor</h3>
23.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
24.                             <img src="./assets/images/3.png" alt="Alternate" height="164" width="283">
25.                        </a>
26.                     </li>
27.                     <li class="item">
28.                        <a href="https://www.nof-community.de/index.php?action=impressum">
29.                             <h3>Lorem ipsum dolor</h3>
30.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
31.                             <img src="./assets/images/4.png" height="164" width="283">
32.                        </a>
33.              </li>
34.                     <li class="item">
35.                       <a href="https://www.nof-community.de/index.php?action=impressum">
36.                             <h3>Lorem ipsum dolor</h3>
37.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
38.                             <img src="./assets/images/5.png" alt="" height="164" width="283">
39.                       </a>
40.                     </li>
41.              <li class="item">
42.                        <a href="https://www.nof-community.de/index.php?action=impressum">
43.                             <h3>Lorem ipsum dolor</h3>
44.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
45.                             <img src="./assets/images/6.png" height="164" width="283">
46.                        </a>
47.                     </li>
48.            </ul>    
49.         </div>

[nettesekel]

Der Code für eine einzelne Box beginnt jeweils mit

Code: HTML5

1. <li class="item">

und endet mit

Code: HTML5

1. </li>

-----------------------------------------------------------------------------------------------------

Solltet ihr also mehr als die vorhandenen Boxen einbinden wollen, müsst ihr nach dem letzen

Code: HTML5

1. </li>

zusätzliche Codeblöcke einfügen. Ein kompletter Code-Block für eine Box sieht so aus:

Code: HTML5

1.                         <li class="item">
2.                            <strong class="new">new</strong>
3.                               <a href="https://www.nof-community.de/index.php?action=impressum">
4.                                 <h3>Lorem ipsum dolor</h3>
5.                                 <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
6.                                 <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">
7.                              </a>
8.                         </li>

-----------------------------------------------------------------------------------------------------

Die Zeile

Code: HTML5

1. <strong class="new">new</strong>

benötigt nur dann, wenn in der Box die New-Kennzeichnung erscheinen soll.
Bei genauerem Betrachten des kompletten Codes werdet ihr erkennen, dass nur die ersten 3 Code-Blöcke diese Zeile enthalten, da auch nur die ersten 3 Boxen die Kennzeichnung "New" enthalten.

-----------------------------------------------------------------------------------------------------

In der nachfolgenden Zeile ersetzt ihr meinen Link gegen den, den der Besucher aufrufen soll, wenn er auf das jeweilige Bild klickt.

Code: HTML5

1. <a href="https://www.nof-community.de/index.php?action=impressum">

-----------------------------------------------------------------------------------------------------

In dieser Zeile

Code: HTML5

1. <h3>Lorem ipsum dolor</h3>

tauscht ihr den Text "Lorem ipsum dolor" gegen die jeweilige Überschrift aus, die unterhalb des Bildes sichtbar ist. Achtet darauf dass sie nicht zu lang wird.

-----------------------------------------------------------------------------------------------------

In dieser Zeile

Code: HTML5

1. <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>

tauscht ihr den Text zwischen den <p></p> gegen euren eigenen Beschreibungstext aus, welcher bei mausover eingeblendet wird.

-----------------------------------------------------------------------------------------------------

Und zum guten Schluss editiert ihr die Pfadangabe zum jeweilgen Bild

Code: HTML5

1. <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">

wobei zu beachten wäre, dass bei verwendung auf der Startseite der Pfad mit einem Punkt beginnt, bei Verwendung auf allen Unterseiten muss er mit 2 Punkten beginnen. (ausgehend von einer Publizierung nach Assettyp)

-----------------------------------------------------------------------------------------------------

Ich wünsche gutes gelingen!