[Help] How i Create This Lightbox On Single Image ???

[exzus]

Hi Good Guys,
please help me.
tell me method how i create this one light box on single image ???

Code:

http://quasar.rockthemes.net/blog/

please share your idea ??

[exzus]

please share your idea ..... i am not well in css or java

[Loomy]

javascript and/or css or both -> right click, inspect page / view source and check urself

[Loomy]

<div class="hover-bg" style="opacity: 1;"><div class="hover-icon-container "> <a href="http://quasar.rockthemes.net/?post_type=post&amp;p=421" class="iconeffect" style="opacity: 1; margin-top: 138.5px;"> <img src="http://quasar.rockthemes.net/wp-content/themes/quasartheme/images/icomoon/link.svg?caaaa1" class="use_svg"> </a>

Bsically the Glow / Mouse Over layer is always there, at startup display is set to none, and when mouse over is detected JS is called to change opacity from 0 to 1 (0% to 100%) over a period of time. this all within in a div layer, together with the Link bu tton and expand button or w/e. This Quasar theme is available..why not dowwnload it and inspect

Save the Page As... (As complete webpage) on ur HDD, go to that folder, all the necessary CSS and JS will be included there.then just pick that apart.

now even more so, if u unfamiliar with js/css why not just use a plugin/script. There are many for wordpress, some copy&paste samples for CSS and JS can be found on snippet type sites

[Loomy]

Also bro, it seems to use PrettyPhoto.. which is a small plug and play JS library, very little coding required. what will u be working with.. are u developing from scratch and what IDE / language

[exzus]

how i set this ??? i installed quasar theme but prettyPhoto is not implemented correctly .... where i change this....now i am using foobox...

http://fooplugins.com/plugins/foobox/#/

i want like 2nd picture in my single image. please help

[exzus]

(08-10-2014 01:37 PM)Loomy69za Wrote:  <div class="hover-bg" style="opacity: 1;"><div class="hover-icon-container "> <a href="http://quasar.rockthemes.net/?post_type=post&amp;p=421" class="iconeffect" style="opacity: 1; margin-top: 138.5px;"> <img src="http://quasar.rockthemes.net/wp-content/themes/quasartheme/images/icomoon/link.svg?caaaa1" class="use_svg"> </a>

Bsically the Glow / Mouse Over layer is always there, at startup display is set to none, and when mouse over is detected JS is called to change opacity from 0 to 1 (0% to 100%) over a period of time. this all within in a div layer, together with the Link bu tton and expand button or w/e. This Quasar theme is available..why not dowwnload it and inspect

Save the Page As... (As complete webpage) on ur HDD, go to that folder, all the necessary CSS and JS will be included there.then just pick that apart.

now even more so, if u unfamiliar with js/css why not just use a plugin/script. There are many for wordpress, some copy&paste samples for CSS and JS can be found on snippet type sites

where i made change in my website ..... please help