webentwicklung-frage-antwort-db.com.de

Bild beim Schweben aufleuchten

Werfen Sie einen Blick auf http://www.kickstarter.com .

Wenn Sie mit der Maus über das Logo fahren, leuchtet das Bild auf. Ist dieser Effekt möglich, ohne ein anderes Bild beim Schweben zu verwenden?

Meine erste Idee war, ::after:hover zu verwenden und ein weißes Quadrat mit hoher Transparenz hinzuzufügen, das das Logo abdeckt, aber da mein Logo auf einem blauen Hintergrund platziert ist, würde dies nicht funktionieren. Eine andere Idee ist, die Deckkraft auf 0,9 und beim Schweben auf 1 zu setzen. Dadurch wird das Bild jedoch standardmäßig zu dunkel.

5
lawls

Soweit mir bekannt ist, können Sie derzeit aufgrund des blauen Hintergrunds mit reinem CSS nicht das tun, was Sie benötigen. Ich denke, Ihre beste Wette ist es, das Bild in Photoshop so zu bearbeiten, dass es :hover hell ist, und dann so etwas wie Folgendes zu verwenden:

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

Das Ändern der Deckkraft beim Hover funktioniert:

img:hover {
   opacity: 0.5;
}

Fiddle

19
Andy

Möglicherweise können Sie die CSS-Bildfilter wie folgt verwenden:

img:hover {-webkit-filter: brightness(150%); }


Das sieht manchmal lustig aus und funktioniert nur in Webkit-Browsern, aber es ist die beste Lösung, die ich mir vorstellen kann. So können Sie auch Ihren blauen Hintergrund beibehalten.

Hier ist eine Jsfiddle, die das Kickstarter-Logo auf einem blauen Hintergrund zeigt.

http://jsfiddle.net/62bCB/



Prost,

19
jerboa88

Das ursprüngliche CSS hat:

img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

Fiddle: http://jsfiddle.net/praveenscience/hfUpk/

Sie können diesen CSS-Code verwenden, der das Aufleuchten zu einem sanfteren Übergang macht, als nur sofort hell zu sein. Techpp.com und Techlivewire.com verwenden dasselbe CSS oder ein ähnliches CSS auf ihren Abschnitten mit Frontpage-Informationen. Ich konnte kein CSS zum Posten hierher bringen, da der Stackoverflow mir immer wieder Fehler lieferte, also habe ich ihn in eine Pastete gelegt. http://paste2.org/1L9H2XsF

0
user3268442

sie können einen Opazitätswert zwischen 0,1 und 1 verwenden. Sehr hell und 1 Wert ist dunkel (Standard).

img {
    filter: alpha(opacity=100);
    opacity: 1;
}
img:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
0
Shahnawaz

Je nachdem, welche Browser unterstützt werden sollen, stehen Ihnen einige Optionen zur Verfügung. Sie können das Logo zu einem Hintergrundbild machen und das Bild dann beim Hover ändern. (oder Sprite das Bild, damit es nicht flackert)

Sie können auch eine Kombination aus CSS-Opazität und Microsoft-Filtern für ältere IE-Versionen ausprobieren. http://www.w3schools.com/cssref/css3_pr_opacity.asp

Da Sie erwähnen, dass Sie einen dunklen Hintergrund haben, können Sie einige der neuen CSS-Filter (Sättigung, Helligkeit usw.) ausprobieren, aber Sie haben kein Glück für den IE. http://www.html5rocks.com/de/tutorials/filters/understanding-css/

0
smurfarita