1

I am using prettyphoto on my website and want to change its settings. For example I would like to give blur effect to the dark overly when an image opens.

I found the setting of the overly in its css files:

div.pp_overlay{
    background:#000;
    display:none;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:9500;
}

Also I found it inline where the overly tag appears:

style="opacity: 0.8; height: 667px; width: 1366px; display: block;"

So do you have any idea? how can I give it CSS3 effects like blur or grayscale? PhotoPretty's website and demos: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
Alex Jj
  • 1,343
  • 10
  • 19
  • 30
  • Just apply http://css-plus.com/2012/03/gaussian-blur/ or http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css to `div.pp_overlay` depending on which style you want. – Joe Jun 25 '13 at 19:13
  • @Joe Thanks for your post. I know how to add it, like `-webkit-filter:blur (5px);` but it does not work at all. – Alex Jj Jun 25 '13 at 19:16
  • Ah, ok. I just had a quick try and it definitely doesn't achieve the effect you want, sorry. I've just tested a different method using Chrome developer tools. You can get a fairly decent effect by applying the blur (e.g. `-webkit-filter: blur(2px);`) to the main content container (on the demo page this is `#content-container`). You could add all the blur css to one class then add it when the lightbox is opened and remove it when it's closed (using the `callback:` option). – Joe Jun 25 '13 at 19:26

0 Answers0