Hover-Effekte

  • Ich habe mich in letzter Zeit ein wenig mit CSS beschäftigt und möchte Euch gern daran teil haben lassen.
    Es ging mir darum die Seite optisch auzubereiten und platzsparend Text unterzubringen der auch von Google leicht zu verarbeiten ist.


    Erst mal eine eifache Variante (Bildwechsel) in HTML. Auf meiner Seite zella.de zB. oben die Social-Butten oder der Link zu Holiday-Check.

    Code
    1. <a href="http://community.zeta-producer.com/" target="_blank"><img onmouseover="src='Bild2.png'" onmouseout="src='Bild1.png'" title="" border="0" alt="" src="Bild1.png" /></a>


    Zusätzlich kann man die 2. Grafik vorladen lassen. Ganz am Ende der Seite diesen Quelltext:

    Code
    1. <img src="Bild2.png" width="1" height="1" border="0" style="display:none;">


    Was ich Euch aber eigentlich zeigen wollte ist die CSS-Variante die ihr weiter unten auf meiner Startseite sehen könnt.


    Als erstes legt Ihr auf dem Server ein neues Verzeichniss mit dem Namen CSS an.
    Nun erstellt Ihr Euere Grafiken sowie eine Hintergrundgrafik für den Text und ladet diese in Eueren ersellten CSS-Ordner.
    Ihr nehmt nun einfach den Windoof-EDITOR und fügt dort folgenden Code ein, den Ihr noch anpassen müsst.
    Zeile 2, 3, 20 und 21 die Größe eurer Grafik und Zeile 17 euere HG. Den Rest findet Ihr dann schon raus.


    Steichert die Datei als hover.txt Danach benennt ihr die Datei um in hover.css
    Diese Datei packt Ihr auch in den ersellten CSS-Ordner.



    In Zeta öffnet Ihr die Attribute - Mobile-Script und fügt folgendes ein:

    Code
    1. <link rel="stylesheet" type="text/css" href="http://deineseite.de/css/hover.css" />


    Nun einen Neuen Artikel, entwerdet HTML-Quelltext oder Text und auf Html umschalten.

    Code
    1. <div class="view view-tenth"><img src="http://deineseite.de/css/deinbild.jpg" />
    2. <div class="mask">
    3. <h2>Überschrift</h2>
    4. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
    5. <a class="info" href="dein Link">weiter</a></div>
    6. </div>
  • Klasse!


    Vielen Dank! Das hier so ausführlich zu posten, finde ich toll.
    Super Arbeit.


    Nebenbei bemerkt, Deine Seite sieht super aus, macht Lust auf Urlaub dort.


    :thumbsup: VG Thomas

  • Hallo Mario,


    vielen dank für deine schnelle Reaktion. Attribute habe ich gefunden und Grafik konnte ich darstellen. Allerdings mit dem Switch-Effekt zum Text klappt es nicht :-( . Sehe immer nur die Grafik.
    Bin neu im HTML-programmieren und benötige Hilfe.


    Danke nochmals.

  • Hallo,
    ich habe die Grafik und Hintergrundgrafik liegen im Selben Ordner auf ´m Server. Den Hover-Quellcode habe ich in eine txt. Datei kopiert und aus dieser eine html-Datei gemacht und umbenannt in css.html. Die Zeile 17 habe ich entsprechend unserer Seite abgeändert.
    Quellcode hover:
    1..view {
    2. width: 276px;
    3. height: 184px;
    4.
    5. margin: 0em auto 0em auto;
    6. border: 1px solid #ccc;
    7.-webkit-border-radius: 5px;
    8.-moz-border-radius: 5px;
    9.border-radius: 5px;
    10. overflow: hidden;
    11. position: relative;
    12. text-align: center;
    13. -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    14. -moz-box-shadow: 1px 1px 2px #e6e6e6;
    15. box-shadow: 0 8px 10px -6px #222;
    16. cursor: default;
    17. background: #fff url(file://EA-SRV-3/Archiv/2 Vertrieb/Marketing/EA Online/Homepage/ZETA/erhardt-abt (deutsch)/css/Hintergrundgrafik.jpg) no-repeat center center;
    18.}
    19..view .mask,.view .content {
    20. width: 276px;
    21. height: 184px;
    22. position: absolute;
    23. overflow: hidden;
    24. top: 0;
    25. left: 0;
    26.}
    27..view img {
    28. display: block;
    29. position: relative;
    30.}
    31..view h2 {
    32. font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
    33. color: #006600;
    34. text-align: center;
    35. position: relative;
    36. font-size: 17px;
    37.
    38. background: rgba(0, 0, 0, 0.8);
    39. margin: 10px 0 0 0;
    40.}
    41..view p {
    42. font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
    43. font-style: italic;
    44. font-size: 14px;
    45. position: relative;
    46. color: #fff;
    47. padding: 10px 10px 2px;
    48. text-align: center;
    49.}
    50..view a.info {
    51. display: inline-block;
    52. text-decoration: none;
    53. padding: 2px 6px;
    54. background: #fff;
    55. color: #006600;
    56. text-transform: uppercase;
    57.border: 1px solid #006600;
    58.border-radius: 5px;
    59.
    60.}
    61..view a.info: hover {
    62. -webkit-box-shadow: 0 0 5px #000;
    63. -moz-box-shadow: 0 0 5px #000;
    64. box-shadow: 0 0 5px #666666;
    65.}
    66.
    67..view-tenth img {
    68. -webkit-transform: scaleY(1);
    69. -moz-transform: scaleY(1);
    70. -o-transform: scaleY(1);
    71. -ms-transform: scaleY(1);
    72. transform: scaleY(1);
    73. -webkit-transition: all 0.7s ease-in-out;
    74. -moz-transition: all 0.7s ease-in-out;
    75. -o-transition: all 0.7s ease-in-out;
    76. -ms-transition: all 0.7s ease-in-out;
    77. transition: all 0.7s ease-in-out;
    78.}
    79..view-tenth .mask {
    80. background-color: rgba(255, 255, 255, 0.3);
    81. -webkit-transition: all 0.5s linear;
    82. -moz-transition: all 0.5s linear;
    83. -o-transition: all 0.5s linear;
    84. -ms-transition: all 0.5s linear;
    85. transition: all 0.5s linear;
    86. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    87. filter: alpha(opacity=0);
    88. opacity: 0;
    89.}
    90..view-tenth h2 {
    91. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    92. background: transparent;
    93. margin: 20px 40px 0px 40px;
    94. -webkit-transform: scale(0);
    95. -moz-transform: scale(0);
    96. -o-transform: scale(0);
    97. -ms-transform: scale(0);
    98. transform: scale(0);
    99. color: #006600;
    100. -webkit-transition: all 0.5s linear;
    101. -moz-transition: all 0.5s linear;
    102. -o-transition: all 0.5s linear;
    103. -ms-transition: all 0.5s linear;
    104. transition: all 0.5s linear;
    105. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    106. filter: alpha(opacity=0);
    107. opacity: 0;
    108.}
    109..view-tenth p {
    110. color: #006600;
    111. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    112. filter: alpha(opacity=0);
    113. opacity: 0;
    114. -webkit-transform: scale(0);
    115. -moz-transform: scale(0);
    116. -o-transform: scale(0);
    117. -ms-transform: scale(0);
    118. transform: scale(0);
    119. -webkit-transition: all 0.5s linear;
    120. -moz-transition: all 0.5s linear;
    121. -o-transition: all 0.5s linear;
    122. -ms-transition: all 0.5s linear;
    123. transition: all 0.5s linear;
    124.}
    125..view-tenth a.info {
    126. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    127. filter: alpha(opacity=0);
    128. opacity: 0;
    129. -webkit-transform: scale(0);
    130. -moz-transform: scale(0);
    131. -o-transform: scale(0);
    132. -ms-transform: scale(0);
    133. transform: scale(0);
    134. -webkit-transition: all 0.5s linear;
    135. -moz-transition: all 0.5s linear;
    136. -o-transition: all 0.5s linear;
    137. -ms-transition: all 0.5s linear;
    138. transition: all 0.5s linear;
    139.}
    140..view-tenth:hover img {
    141. -webkit-transform: scale(10);
    142. -moz-transform: scale(10);
    143. -o-transform: scale(10);
    144. -ms-transform: scale(10);
    145. transform: scale(10);
    146. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    147. filter: alpha(opacity=0);
    148. opacity: 0;
    149.}
    150..view-tenth:hover .mask {
    151. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    152. filter: alpha(opacity=100);
    153. opacity: 1;
    154.}
    155..view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
    156. -webkit-transform: scale(1);
    157. -moz-transform: scale(1);
    158. -o-transform: scale(1);
    159. -ms-transform: scale(1);
    160. transform: scale(1);
    161. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    162. filter: alpha(opacity=100);
    163. opacity: 1;
    164.}
    165.


    Jetzt liegt alles im Ordner CSS.


    Anschließend habe ich, dank deiner Hilfe, in Attribute-Mobile-Attribute den Quellcode:


    <link rel="stylesheet" type="text/css" href="http://deineseite.de/css/hover.css" />


    eingefügt.


    Dann in Zeta einen neuen Artikel erstellt mit dem Quellcode:


    <div class="view view-tenth"><img src="http://deineseite.de/css/deinbild.jpg" />
    <div class="mask">
    <h2>Überschrift</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
    <a class="info" href="dein Link">weiter</a></div>
    </div>


    Diesen entsprechend meiner Seite abgeändert und das Bild wurde auch gefunden.


    Genau dieses Bild wird dauerhaft angezeigt ohne den Effekt des Wechselns zum hinterlegten Text. In welcher Form muß der Text in der CSS liegen (Format)??
    Auch das Hintergrundbild wird nicht dargestellt.


    Meine Vermutung ist, dass ich am Quellcode-hover einen Fehler drin habe. Aber ich leider keine Erfahrung in der html-Programmierung habe und bisher alles über die Zeta-Tools erledigen konnte.


    Nochmals vielen Dank für deinen entscheidenden Tipp


    Gruß Michael

  • Hallo Mario,


    "file" statt "http" nutze ich nur um offline in ZETA zu testen. Das Bild im Text funktioniert auch. Lediglich der Hover Effekt tut nicht. Geht das bei ZETA nur, wenn ich die Seite vorher online stelle ? Geht das Offline nicht?


    Gruß Michael

  • In der Vorschau ist nichts anderes als im Zeta Producer zu sehen. Keine Ahnung wie ich weiter machen soll.


    Besser wäre wirklich, wenn sich ZETA hier kümmern würde.

  • Es sind deine Verweise die nicht korrekt sind.


    Du hast deine css folgendermaßen verlinkt:

    Code
    1. file://EA-SRV-3/Archiv/2 Vertrieb/Marketing/EA Online/Homepage/ZETA/erhardt-abt (deutsch)/css/hover.css


    Da ist sie aber nicht zu finden, du musst hier die korrekte URL eingeben unter diese im www zu finden ist.
    Also zB. http://www.erhardt-abt.de/css/hover.css. Da ich deine Ordner-Struktur auf dem Server nicht kenne kann nicht sagen wo genau du die Datei abgelegt hast.


    Das gleiche gilt für Dein Bild:

    Code
    1. http://erhardt-abt.de/EA-SRV-3/Archiv/2 Vertrieb/Marketing/EA Online/Homepage/ZETA/erhardt-abt (deutsch)/CSS/EA_ZF_b.jpg


    Achte bei URLs immer auf Groß-Kleinschreibung, außerdem hast du Leerzeichen drinn, das geht nicht.

  • Hallo,


    nun, das kann ich nicht beantworten, da ich kein Zeta Mitarbeiter bin. Aber wenn Du hier im Forum die Beiträge ein wenig aufmerksam verfolgst, wirst Du feststellen, dass es ggf. in der Version 12.5 eine Möglichekeit geben wird, eigene Widgets und Templates zu erstellen bzw. vorhandene zu verändern.


    Da diese Version als Beta Version für eine bestimmte Zeit aber auch eben schon zur Verfügung steht, gibt es hierfür auch einen speziellen Board Bereich:
    Entwickler-Bereich (Betaversion) - Support-Forum


    Hier gibt es u.a. dieses Widget bereits - aber nur für die Version 12.5 Beta:
    Hover Effekte für ZP 12.5 (Beta Version)


    Die eingepflegten Effekte kannst Du hier sehen:
    http://www.zella.de/test/zeta12.5/hover.html


    Du wirst Dich also sicherlich noch ein wenig gedulden müssen. Letztendlich gibt es viele individuelle Wünsche der ZP User.

  • Hallo,


    ich würde auch gern ein Bild mit einem Hover-Effekt versehen. Den CSS Quelltext habe ich in mobile_script eingefügt und auch den Quelltext als Widget eingefügt.


    Wo aber bitte muss ich das Bild speichern, welches mit einem Hover-Effekt versehen werden soll, damit es geladen wird? Und was muss ich als img src angeben?


    Sorry bin totaler html-Neuling :/ Wäre dankbar, wenn mir das mal jemand "idiotensicher" erklärt :D


    LG Jenny