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;
}
Comments
Please sign in to leave a comment.