Opacity (Transparenz bei Hover auf Bilder)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alpha
bild
blocken
code
dank
datei
display
eigenschaft
filter
fotografie
hilfe
http
jemand
kleinen bildern
maus
navigation
page
problem
span
url
-
Hallo zusamen
Ich möchte auf meiner Homepage (mit Wordpress gemacht), dass alle Bilder, wenn man mit der Maus darüber geht, ein wenig transparent werden. Bei dem Theme ist das bereits geregelt, aber wenn ich mit einem Plugin Fotos rauflade nicht. Kann mir jemand sagen wie das genau geht? Ich weiss, dass ich da irgendwo einen Code mit Opacity reinsetzen muss, aber weiss nicht wie und wo.
Hier der Code des Style-Sheets der Galerie:
/* ----------- Gallery style -------------*/ .ngg-galleryoverview { margin-top: 10px; width: 100%; clear:both; display:block !important; } .ngg-gallery-thumbnail-box { float: left; } .ngg-gallery-thumbnail { float: left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; } .ngg-gallery-thumbnail img { margin: -2px 2px 2px -2px; background-color:#FFFFFF; border:0px solid #FFFFFF; display:block; padding:1px; position:relative; } .ngg-gallery-thumbnail img:hover { background-color: #FFFFFF; } .ngg-gallery-thumbnail span { display:none; } .ngg-clear { clear: both; } /* ----------- Gallery navigation -------------*/ .ngg-navigation { font-size:0.9em !important; clear:both !important; display:block !important; padding-top:15px; text-align:center; } .ngg-navigation span { font-weight:bold; margin:0pt 6px; } .ngg-navigation a.page-numbers, .ngg-navigation a.next, .ngg-navigation a.prev, .ngg-navigation span.page-numbers, .ngg-navigation span.next, .ngg-navigation span.prev { border:1px solid #DDDDDD; margin-right:3px; padding:3px 7px; } .ngg-navigation a.page-numbers:hover, .ngg-navigation a.next:hover, .ngg-navigation a.prev:hover, .ngg-navigation span.page-numbers:hover, .ngg-navigation span.next:hover, .ngg-navigation span.prev:hover { background-color: #0066CC; color: #FFFFFF !important; text-decoration: none !important; }
Beispiel auf meiner Site: http://www.eliane-fotografie.ch/neue-fotos-2/ (Schlussendlich sollte alles so aussehen, das etwas grössere Bild oben).
Für Eure Hilfe wäre ich sehr dankbar.
Lg Elianeb -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
.bla:hover{opacity:.5}
bla ist deine Klasse und die Zahl der gewünschte Wert. 1.0 ist normal und 0.0 komplett unsichtbar.
Kannst auch statt .5 - 0.5 schreiben, falls dich das verwirrt. -
Die dafür verantwortliche Regel hast du nicht gepostet
.ngg-gallery-thumbnail img:hover { background-color: #FFFFFF; filter: alpha(opacity=0.9); -moz-opacity: 0.9; opacity: 0.9; display:block; }
Wenn du bei einem anderen Bild den selben Effekt haben willst musst du dir einen CSS-Selektor heraussuchen der nur das Bild auswählt und entsprechend so eine Regel definieren…
Beispiele: für das große Bild auf der von dir verlinkten Seite wäre das
, für die Zufallsbilder auf der Seiteimg.frame:hover.ngg-widget img:hover -
Das hab ich in der Zwischenzeit selber versucht rein zu setzen aber irgendwie verschwinden jetzt die bilder ganz wenn man mit der Maus drüber fährt :) Aber danke schon mal für eure Antworten! Ich habe so ziemlich gar keine Ahnung von CSS oder PHP und weiss deshalb auch nicht wo und was ich einsetzen muss... Also wenn mir jemand helfen kann/möchte, dann bitte dass auch jemand wie ich dabei nachkommt :) Danke!
Beitrag zuletzt geändert: 31.10.2012 11:52:31 von elianeb -
elianeb schrieb:
Das hab ich in der Zwischenzeit selber versucht rein zu setzen aber irgendwie verschwinden jetzt die bilder ganz wenn man mit der Maus drüber fährt :) Aber danke schon mal für eure Antworten! Ich habe so ziemlich gar keine Ahnung von CSS oder PHP und weiss deshalb auch nicht wo und was ich einsetzen muss... Also wenn mir jemand helfen kann/möchte, dann bitte dass auch jemand wie ich dabei nachkommt :) Danke!
Das Problem scheint wohl gelöst zu sein? Davon gehe ich aus, weil auf deiner Seite alles richtig angezeigt wird.
Im übrigen, verwenden immer noch viele Leute den IE8, der inzwischen einen anderen Code dafür hat.. Von IE4 - 7 war es noch
filter: alpha(opacity=50);
inzwischen ist es für ie8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
Hierbei muss man drauf achten, dass der -ms-filter an erster Stelle kommt, um die Abwärtskompatibilität zu erhalten.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);
Für den ie9 geht das noch nicht so wirklich, da opacity kein Standart ist. In dem Fall muss man die Internetseite im Kompabilitätsmodus für den IE8 fahren. Das funktioniert so:
<meta http-equiv="X-UA-Compatible" content="IE=8" >
PS: Es ist eigenartiger Weise unterschiedlich. Manchmal kann der IE9 es und manchmal nicht, ziemlich skurios aber leider Microsoft eben.
Beitrag zuletzt geändert: 6.11.2012 7:51:44 von kill-a-teddy -
Erstmal vielen Dank für die aufsührliche Antwort! Ich werde versuchen, das dann noch so einzubauen mit dem IE8.
Ja, grundsätzlich ist das Problem mittlerweile gelöst. Ich verstehe nur nicht so ganz, warum es beim grossen Bild so einen "sanften" Übergang gibt wenn man mit der Maus drüber fährt und bei den kleinen Bildern, wo ich ja den Code eingefügt habe, so einen "harten" Übergang. Weiss jemand woran das liegt bzw. wie ich das bei der kleinen Bildern auch so machen kann?
Danke für Eure Hilfe! -
elianeb schrieb:
Erstmal vielen Dank für die aufsührliche Antwort! Ich werde versuchen, das dann noch so einzubauen mit dem IE8.
Ja, grundsätzlich ist das Problem mittlerweile gelöst. Ich verstehe nur nicht so ganz, warum es beim grossen Bild so einen "sanften" Übergang gibt wenn man mit der Maus drüber fährt und bei den kleinen Bildern, wo ich ja den Code eingefügt habe, so einen "harten" Übergang. Weiss jemand woran das liegt bzw. wie ich das bei der kleinen Bildern auch so machen kann?
Danke für Eure Hilfe!
Kein Problem. So wie ich das gerade gesehen habe, liegt das an den verschiedenen Methoden.
Das große Bild verwendet z.T. Javascript und ein Hintergrundbild, um das div Transparent zu machen.
Inzwischen weiß ich auch, dass die Elemente beim TAG- Namen geholt werden. Da du also überall einen img Tag verwendest, ist es möglich, dass diese Einstellungen nur kommen, weil du die JavaScript Eigenschaft überschreibst...
Versuch mal ein Bild zu machen mit
und schau, ob das funktioniert...
<img src="" class="frame img_nofade" width="570" height="360"> -
Also wenn ich jetzt eine neue Seite erstelle mit dem Code klappt das, dass das dann so sanft übergeht. Da ich die Thumbnails aber durch ein installiertes Plugin anzeigen lasse (Nextgen Gallery) ist nun die Frage, wie ich das dort einbinden kann, weil ich ja die Bilder nicht einzeln aufliste. Geschieht das auch in der CSS-Datei, wo ich auch den Code mit Opacity hinzugefügt habe?
-
elianeb schrieb:
Also wenn ich jetzt eine neue Seite erstelle mit dem Code klappt das, dass das dann so sanft übergeht. Da ich die Thumbnails aber durch ein installiertes Plugin anzeigen lasse (Nextgen Gallery) ist nun die Frage, wie ich das dort einbinden kann, weil ich ja die Bilder nicht einzeln aufliste. Geschieht das auch in der CSS-Datei, wo ich auch den Code mit Opacity hinzugefügt habe?
Hmm also genau kann ich dir das nicht sagen, aber ich würde mal probieren den Teil des codes zu finden, andem Nexten Gallery deinem Bild eine "class" verpasst. Das änderst du dann in
und schaust dann einfach weiter, wie das funktioniert... Da muss man sich leider Schritt für Schritt ran tasten. Also nächstes kannst du dann mal schauen, dass du in der CSS- Datei die Opacity eigenschaften wieder entfernst bzw. ALLE Eigenschaften, die mit dem Bild und dessen Hover zu tun haben... Wie man gesehen hat lag ich auch eben schon richtig, deshalb gehe ich stark davon aus, dass nachdem du das alles fertig hast es wieder funktionieren wird...class="frame img_nofade"
Wenn du jetzt gar nicht mit PHP klar kommst, dann kopiere einmal die php Datei, inder nextgen gallery die eigenschaften definiert... -
Geschafft!! :)
Vielen Dank für deine Hilfe! Die Lösung war in der Datei gallery.php, dort konnte man den "class-Code" einfügen bzw. mit dem vorhandenen ersetzen.
Beitrag zuletzt geändert: 6.11.2012 13:25:09 von elianeb -
elianeb schrieb:
Geschafft!! :)
Vielen Dank für deine Hilfe! Die Lösung war in der Datei gallery.php, dort konnte man den "class-Code" einfügen bzw. mit dem vorhandenen ersetzen.
Dann war mein Lösungsansatz ja doch richtig, freut mich zu hören. Viel Spaß und gutes gelingen weiterhin. :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
