• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Hover Text by nextGen Thumbnail

MissWonderland

Neues Mitglied
Hi,
ich benutze auf auf meiner Wordpress Webseite den nextGen Gallery Plugin und hab ein Feld so im CSS der Page programmiert, dass es den Thumbnail einer Galerie zeigt, bei klick auf den Thumbnail sich in einer lightbox die Galerie zum durchklicken oeffnet. Ich wuerde gerne einen Banner Effekt ueber dem Thumnail haben und habe schon hinbekommen, beim mousover die opacity zu aendern, allerdings hapert es bei dem Text, der dann beim mouseover auch in der Mitte erscheinen soll.
Ich poste mal die codes hier rein, vielleicht hat jemand eine Idee wie der CSS code dafuer aussehen sollte? Wichtig ist nur, dass die Font styles vom theme uebernommen werden und das ganze im center erscheint beim hover.
Danke :)

html von der nextGen Gallery, die nur den Thumbnail zeigt:

[ngg_images gallery_ids=5 display_type="photocrati-nextgen_basic_thumbnails" disable_pagination=1 images_per_page=1 show_all_in_lightbox=1 override_thumbnail_settings="1" thumbnail_crop="0" thumbnail_border="0" thumbnail_hight="600px"]


CSS der Page mit dem thumbnail hover effekt:


.nextgen #ngg-gallery-thumbnail img {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity .5s linear;
}

.ngg-gallery-thumbnail img:hover {opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: opacity .5s linear;
}
 
Werbung:
ich benutze auf auf meiner Wordpress Webseite den nextGen Gallery Plugin
Nutze kein WP, musste da erstmal fix googeln :D

Also https://de.wordpress.org/plugins/nextgen-gallery/ (offizielle Seite: https://www.imagely.com/docs/nextgen-gallery/)

Nur welches der diversen Demos?

Vielleicht https://www.imagely.com/wordpress-gallery-plugin/basic-thumbnail-gallery/ , oder https://www.imagely.com/wordpress-gallery-plugin/pro-thumbnail-gallery/ , ...?

Und wer hier nicht mit WP arbeitet, kann sich auch nicht das Plugin fix runterladen und installieren, um sich die Testumgebung einzurichten.

Von daher wäre es entgegenkommend, Deine Seite hier zu verlinken, damit alle was davon haben, und entsprechend auch Deine Chancen steigen, hier zielführende Tipps zu lesen.
 
Danke fuer die schnelle Antwort :)
Ich nutze den Basic Plugin. Der Pro Plugin hat dieses Feature schon inklusive, allerdings brauche ich es nur fuer ein einzigen Thumbnail und dafuer die pro-Version kaufen... na ja :D

Hier kannste die Test Page sehen: goo.gl/vwjxpg
 
Werbung:
Sorry wegen der längeren Wartezeit. Ich musste zwischendurch was essen :D

... und hab das mit dem Pseudoelement ::before (siehe https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement/before,_after) gelöst bekommen :)
CSS:
.ngg-gallery-thumbnail a::before {
  visibility: hidden;
  display: block;
  width: 100%;
  line-height: 40px;
  content: "Foobar";
  font: 300 'Open Sans', arial, sans-serif;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
}
.ngg-gallery-thumbnail a:hover::before {
  visibility: visible;
}
Fiddle-Demo: https://jsfiddle.net/spicelab/rbprvwau/ - incl. der geforderten Schriftart Open Sans per "External Resources" :cool:

Hoffe, dass ich Dein Vorhaben im Grundsatz richtig verstanden habe.

Das Feintuning im Layout überlasse ich Dir ;)

PS: Kommt für ein "Thumbnail" aber ganz schön groß raus :D
 
Wichtig ist nur, dass [...] das ganze im center erscheint beim hover
Falls das auf die Vertikale abzielt:
CSS:
a {
  ...
  position: relative; /* Hinzugekommene Regel zwecks vertikaler Zentrierung von ::before */
}

.ngg-gallery-thumbnail a::before {
  ...
  /* vertikale Zentrierung */
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
Fiddle-Demo: https://jsfiddle.net/spicelab/bdrpdvgv/ :cool:
 
Ha, du bist ja der Hammer!!! :D VIELEN DANK fuer die Hilfe, dafuer haette ich nen halbes Jahrtausend gebraucht :rolleyes: Haha, ja der Thumbnail ist nicht gerade der Kleinste :D
 
Werbung:
Ha, du bist ja der Hammer!!! :D
Danke, tu' Dir blos nicht weh :D
VIELEN DANK fuer die Hilfe
Gern geschehen :)
dafuer haette ich nen halbes Jahrtausend gebraucht :rolleyes:
Stoppuhrtechnisch keine 10 Minuten beim ersten Fiddle (HTML-/CSS-Snippets aus Deiner Seite abfischen, im Fiddle einfügen, CSS ergänzen, testen, fertitsch) :cool:

Das Zweite lief dann unter 2 Minuten: CSS ergänzen -> Run klicken -> Checked -> Fork zum Duplizieren des Fiddles klicken :D

Und welches meiner beiden Demos hat nun den Nagel auf den Kopf getroffen?
 
Danke für's Kompliment :D

Höre oder lese ich auch nicht zum ersten Mal :p
Der code inklusive vertikaler Zentrierung hat das Rennen gemacht, hab noch die Font, Size etc geaendert und das ist dabei raus gekommen :D: goo.gl/vwjxpg :cool: Ich mags :D
Man hat halt seine konkreten individuellen Vorstellungen (Prinzipien), die Unbekannte aus einem Forum kaum treffen können :D:cool:

D'rum:
Hoffe, dass ich Dein Vorhaben im Grundsatz richtig verstanden habe.

Das Feintuning im Layout überlasse ich Dir ;)
:)
 
Werbung:
Zurück
Oben