Add overlay_opacity option

Question

Add overlay_opacity option

Closed this issue 12 years ago · 4 comments

Answer 1 · 2012-12-21T13:16:41.000Z

There is no need in that.
You can customize it through CSS.
Just edit jquery.galleryview-3.0-dev.css (by default).

.gv_overlay {
    ...
    background: rgba(128, 128, 128, 0.5); /*or background-color:*/
    ...
}

or

.gv_overlay {
    ...
    opacity: 0.5; /*that makes content also transparent*/
    ...
}

Answer 2 · 2012-12-21T13:38:52.000Z

Or. You can even make it so:

.gv_overlay {
    ...
    background: #222;
    ...
    opacity: 0.3; /*opacity of transition when mouse outside of overlay*/
    transition: opacity 1s; /*speed of transition when mouse leaves*/
    -moz-transition: opacity 1s; /*fix for Firefox 4 */
    -webkit-transition: opacity 1s; /*fix for Safari and Chrome */
    -o-transition: opacity 1s; /*fix for Opera */
    ...
}

.gv_overlay:hover {
    ...
    opacity: 1; /*opacity of transition when mouse intside overlay*/
    transition: opacity 1s; /*speed of transition when mouse hover*/
    -moz-transition: opacity 1s; /*fix for Firefox 4 */
    -webkit-transition: opacity 1s; /*fix for Safari and Chrome */
    -o-transition: opacity 1s; /*fix for Opera */
    ...
}

Well, transition is a complex feature, so Google for it if interested.

Answer 3 · 2012-12-26T15:40:28.000Z

It is the first thing I tried, but if you check html code, you wil see that opacity does not appear in the code, like it didn't care of it...

Answer 4 · 2012-12-28T09:37:01.000Z

my bad, it works indeed. thx!