Ok. Lets start.
STEP 1
Instead of lightbox-widget in every column we will build such structure (build in one column then copy/paste in all other columns)
-
Lightbox = link box (display: block)
– thumbnail = image (width = 100%) -
modal-popup = div (display: block, position: fixed, height: 100%, z-index: 15000, background: black )
– close-btn = button or link-block with close icon inside (which one you prefer) (position: absolute, align: top-right, margin: 34px)
– img-big = image which will show in big size (position: absolute, depends on how big you want to show this image aligning will be different, I choose height: 70%, margin-left/right: auto, align:top=50%, transform: Y=-50% (it will always keep image in the center))
– img-title = heading (I took h2) (position: absolute, align: bottom, margin-bottom: 30px, text-align: center, color: white
**
When structure will be done make modal-popup = display:none
**
Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_d1RwTE1fNlJrb1U/view