1. Wenn du alle Inhalte sehen, oder selber eine Frage erstellen möchtest, kannst du dir in wenigen Sekunden ein Konto erstellen. Die Registrierung ist kostenlos, als Mitglied siehst du keine Werbung!

Hover Effekte_ Einfache Frage

Diskutiere das Thema Hover Effekte_ Einfache Frage im Forum Web-Design.

  1. dennz2017

    dennz2017 Thread Starter Mitglied

    Beiträge:
    21
    Zustimmungen:
    0
    Mitglied seit:
    12.02.2017
    Huhu, ich habe eine, sicherlich, einfache Frage an Euch Profi`s...

    Ich möchte den hover Effekt "opacity" auf meiner Website anwenden. Nun die erste Frage:
    Benötige ich ein spezielles CSS Konstrukt das ich erst einbinden muss?

    Denn wenn ich folgenden Code in die html Seite einbinde, betrifft das immer ALLE Bilder
    und nicht nur das eine Bild. Ich denke, da muss ich irgendwie entweder noch ein vorrangiges CSS Konstrukt einbinden oder das jeweilige Bild irgendwie speziell eingrenzen können?!


    <style>
    img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    }

    img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    }
    </style>
     
  2. dennz2017

    dennz2017 Thread Starter Mitglied

    Beiträge:
    21
    Zustimmungen:
    0
    Mitglied seit:
    12.02.2017
    Und noch gleich eine andere Frage... Wie lässt man so ein "Band" über die komplette Seite hinweg laufen... von rechts nach links...
    Also mehrere Icons (PNGS) die nebeneinander in einer Schleife laufen sollen... Versteht man das? :D
     
  3. wegus

    wegus Mitglied

    Beiträge:
    16.601
    Zustimmungen:
    3.371
    Mitglied seit:
    13.09.2004
    Zu Deiner ersten Frage:

    Du veränderst dort die Eigenschaften ALLER img-Tags, daher passiert das eben auch für alle Bilder. Wenn das nur bei ausgewählten Bildern passieren soll, dann mußt Du eine CSS-Klasse erstellen die Du dann genau diesen Bildern zuweist. Dann sind nur die Bilder opaque die Du auch so haben wolltest.

    W3schools hat einen tollen CSS-Kurs mit praktischen Beispielen:

    https://www.w3schools.com/cssref/sel_class.asp
     
Die Seite wird geladen...
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite weitersurfst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...