创建灯箱图片

要创建灯箱(图像的模式对话框),可以使用CSS来完成。

包装你的形象  

 

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

 

然后在页面CSS块(样式手风琴)中,使用以下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;
}

 

本文是否有帮助?
0之0认为有帮助

评论

0评论

登入 发表评论。