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;
}
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;
}