Главная » 2013 » Апрель » 24 » Галерея с эффектом
23:01
Галерея с эффектом

Код
<center><style>.view {width: 300px;height: 200px;margin:5px;float: left;border: 5px solid #fff;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}.view .mask, .view .content {width: 300px;height: 200px;position: absolute;overflow: hidden;top: 0;left: 0;}.view img {display: block;position: relative;}.view a.info {background:url(../img/link.png) center no-repeat;display: inline-block;text-decoration: none;padding:0;text-indent:-9999px;width:20px;height:20px;}.main{position:relative;width:640px;margin:0;padding:0;}.gf2-effect .mask {position:absolute; /* Center the mask */top:50px;left:100px;cursor:pointer;border-radius: 50px;border-width: 50px;display: inline-block;height: 100px;width: 100px;border: 50px solid rgba(0, 0, 0, 0.7);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:1;visibility:visible;-moz-transform:scale(4);-webkit-transform:scale(4);-o-transform:scale(4);-ms-transform:scale(4);transform:scale(6);-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.gf2-effect:hover .mask {opacity: 0;border:0px solid rgba(0,0,0,0.7);visibility:hidden;}</style><div class="main"><div class="view gf2-effect"><a href="http://artnov7.ru/gollandskij-pejzazh/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/2.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/pejzazh/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/1.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/natyurmort/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/3.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/morskoj-pejzazh/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/4.jpg"></a><div class="mask"></div></div></div><style>.view {width: 300px;height: 200px;margin:5px;float: left;border: 5px solid #fff;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}.view .mask, .view .content {width: 300px;height: 200px;position: absolute;overflow: hidden;top: 0;left: 0;}.view img {display: block;position: relative;}.view a.info {background:url(../img/link.png) center no-repeat;display: inline-block;text-decoration: none;padding:0;text-indent:-9999px;width:20px;height:20px;}.main{position:relative;width:640px;margin:0;padding:0;}.gf2-effect .mask {position:absolute; /* Center the mask */top:50px;left:100px;cursor:pointer;border-radius: 50px;border-width: 50px;display: inline-block;height: 100px;width: 100px;border: 50px solid rgba(0, 0, 0, 0.7);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:1;visibility:visible;-moz-transform:scale(4);-webkit-transform:scale(4);-o-transform:scale(4);-ms-transform:scale(4);transform:scale(4);-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.gf2-effect:hover .mask {opacity: 0;border:0px solid rgba(0,0,0,0.7);visibility:hidden;}</style><div class="main"><div class="view gf2-effect"><a href="http://artnov7.ru/zhanrovaya-zhivopis//"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/5.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/vidy-s-peterburga/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/6.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/abstrakt/"><img src="http://artnov.16mb.com/wp-content/themes/sliding-door/imagemenu/images/7.jpg"></a><div class="mask"></div></div><div class="view gf2-effect"><a href="http://artnov7.ru/cvety/"><img src="http://artnov7.ru/wp-content/uploads/2013/04/34.jpg"></a><div class="mask"></div></div></div></center>
Категория: Для сайтов | Просмотров: 839 | Добавил: Лаврентий5932 | Рейтинг: 1.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]