Creating a lightbox Image

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

Wrap your image 

 

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

 

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

 

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

 

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.