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.