Creating a Lightbox Image While Using Enquire MAP

Creating a Lightbox Image While Using Enquire MAP

To create a lightbox (modal dialog for images), use the following CSS:

1. Wrap the image   

1. HTML

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

    

2. Then in the page CSS block (style accordion), use the following CSS:  

1. HTML

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

    

2. 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;
   }

    

Please reach out to the dedicated Enquire Account Manager or Enquire MAP Support team for further assistance.