Wie Kann man opacity (wenn man Maus drauf hat) beim Bild im Beitrag einstellen?

  • Hallo,

    Wenn man ganz normales Beitragsbild hinfügt und dann mit der Maus darauf geht, wird es ein bisschen heller. In der Einstellung habe ich das hier gefunden:
    .single-featured { float: left; max-width: 250px; transition: opacity 0.3s linear 0s;

    Wie kann es man einstellen, wenn ich die Bilder nicht als Beitragsbilder habe, sondern so:
    <p style="text-align: center;"><a href="http://www.videosaufdeutsch.de/guatemalas-schutzengel">
    <img class="aligncenter" src="http://s7.postimg.org/3lcb45q7v/hqdefault.jpg" alt="" width="480" height="360" /></a></p> ?

    Ich habe davor und danach <div> versucht zu schreiben und dann in CSS div zu definieren, aber das hat nicht geholfen, beziehungsweise es hat sich mit dem css verbunden und alles hat funktioniert, nur heller nach dem hover wurde es nicht.

    Danke schön für jede Hilfe von euch :)!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich denke ich spreche genug Nerdisch um das zu verstehen. ;)

    Er will einen Transparenz Effekt auf ein Post Image (nicht Post Thumbnail) legen, der greift wenn man mit dem Mauspfeil über das Bild im Artikel zeigt.

    Ohne Link zum Blog kann man aber nur den generellen Tipp geben;

    Man muss die Klasse des Bild ermitteln und dann in der css eine erweiterte hover Definition einbinden, wie zum Beispiel a.img hover: oder so was in der Art.
    Also man muss in der css nur die Klasse die vom Theme vorgegeben ist entsprechend erweitern.

    Bitte keine Fragen per PM, oder Foren-Chat. Für Fragen ist das öffentliche Forum da. Meine Uerdinger Seite

  • Hallo,

    Wenn man ganz normales Beitragsbild hinfügt und dann mit der Maus darauf geht, wird es ein bisschen heller. In der Einstellung habe ich das hier gefunden:
    .single-featured { float: left; max-width: 250px; transition: opacity 0.3s linear 0s;

    Wie kann es man einstellen, wenn ich die Bilder nicht als Beitragsbilder habe, sondern so:
    <p style="text-align: center;"><a href="http://www.videosaufdeutsch.de/guatemalas-schutzengel">
    <img class="aligncenter" src="http://s7.postimg.org/3lcb45q7v/hqdefault.jpg" alt="" width="480" height="360" /></a></p> ?

    Ich habe davor und danach <div> versucht zu schreiben und dann in CSS div zu definieren, aber das hat nicht geholfen, beziehungsweise es hat sich mit dem css verbunden und alles hat funktioniert, nur heller nach dem hover wurde es nicht.

    Danke schön für jede Hilfe von euch :)!


    also div solltest du genrell nicht nochmal als class namen nehmen. div ist doch überall im theme verteilt und damit veränderst du auch alle anderen " divs" probier doch mal einen eigenen namen aus.

    wenn man mit der mouse irgendwo drüber fährt und sich dann was verändern soll, ist der befehl .classname:hover {..} sinnvoll.

  • Hallo,

    ich habs nicht wirklich gelesen. Wenn das Bild auf einem weißen Untergrund steht, reicht ein Filter:

    Code
    .whatever .makes .your .day img {
      -webkit-filter: opacity(.6);
      filter: opacity(.6);
    }

    Komplexer ist ein Ebenenoverlay mit Transition-Effekt und Alpha-Hintergrund.

  • Es tut mir sehr leid, dass ich mich erst jetzt melde (ich war im Urlaub).
    Vielen Dank für eure Hilfe, ich habe schließlich das hier gemacht: vor den bild schreibt man das "<div class="beitragsbildopacity">bild und alles</div>"
    und in css class schreibt man das hier:

    .beitragsbildopacity:hover {
    -webkit-filter: opacity(.8);
    filter: opacity(.8)
    }

    Mit einem weißen Hintergrund funktioniert es super!

    Nochmal DANKE!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!