ActiveDEMAND
Integrated Marketing Platform
Support

Start a new topic

Lightbox Image Popups

To create a lightbox (modal dialog for images), it can be done with CSS.


Wrap your image 


 

<a href="#" class="click-grow"><img ....> </a>

 

Then in the page CSS block (style accordian), use the following CSS:

 

hover-grow {
   position: relative;
}

.hover-grow:hover {
 z-index: 100000;
 transform: scale(2.5);
    -webkit-transform: scale(2.5);
    transition: 1s;
    -webkit-transition: 1s;
   -moz-box-shadow: 0 0 15px 2px #000;
    -webkit-box-shadow: 0 0 15px 2px #000;
    box-shadow: 0 0 15px 2px #000;
}

.click-grow img {
   position: relative;
}

.click-grow:focus img {
 z-index: 100000;
 transform: scale(2.5);
    -webkit-transform: scale(2.5);
    transition: 1s;
    -webkit-transition: 1s;
   -moz-box-shadow: 0 0 15px 2px #000;
    -webkit-box-shadow: 0 0 15px 2px #000;
    box-shadow: 0 0 15px 2px #000;
}

 


Login or Signup to post a comment