Всегда красиво смотрится, когда вы наводите на картинку и происходит красивый эффект с ней. И этот скрипт будет делать его, что можете посмотреть. Будет несколько Avatar с надписью, и когда все будет происходить, то надпись съезжает в низ и все смориться шикарно. Скрипт вам покажет и вы сможете установить на свой отличные эффекты при наведение на изображения работающие на стилях CSS3 . Так же сразу хочу вас предупредить о том что данный скрипт будет работать только на современных браузерах, таких как Chrome, Firefox и Safari так как старые браузеры не поддерживают CSS3. Скрипт работает полностью на CSS3 и по этому установка будет быстрой и лёгкой. Данный пример эффектов можно использовать в любых целях на своём сайте . Я пробовал сделать вид материалов модуля фотографии и у меня получилось а так же я пробовал внутри разместить аватарки пользователей и у меня тоже это получилось, было даже очень оригинально смотреть на них в виде комментариев. И так для того что бы установить данный эффект к себе на сайт в первую очередь вам нужно установить код который я расположил чуть ниже.
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="Ссылка на изображения" />
<figcaption class="caption">Название изображения</figcaption>
</figure>
</div>
В HTML коде вы можете наблюдать две надписи Ссылка на изображения и Название изображения, в замен ссылки на изображение вам нужно указать ссылку к вашей картинки или код который выводит ваше изображения. В замен названия изображения вы можете прописать своё название изображения или вставить код который сам будет выводить названия изображения или Ник пользователя. Теперь установите стили для ваших эффектов для изображения!
CSS3 стиль
.imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
/* thumbnails style */
.imgholder img{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
z-index:5;
opacity:0.5;
filter: alpha(opacity = 50);
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
box-shadow:0 0 5px #000;
transition:
opacity 0.7s ease-out 0.3s;
-moz-transition:
opacity 0.7s ease-out 0.3s;
-webkit-transition:
opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
}
.imgholder figcaption{
position:absolute;
left:0;
top:120%;
width:120px;
color:#004E87;
text-shadow:-1px -1px 0 #fff;
z-index:4;
}
/* decorations style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:120px;
height:120px;
z-index:2;
border:8px solid;
border-color:#DEEBFC;
box-shadow:0 0 3px #AFD3FF;
-moz-box-shadow:0 0 3px #AFD3FF;
-webkit-box-shadow:0 0 3px #AFD3FF;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transition:
box-shadow 1s ease-out,
border-color 1s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1s;
}
.imgholder:hover .outer1{
border-color:#0088EA;
box-shadow:0 0 10px #0285E2;
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10px solid;
border-color: #9BC8FF;
box-shadow:0 0 3px #8EB9FF;
-moz-box-shadow:0 0 3px #8EB9FF;
-webkit-box-shadow:0 0 3px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transition:
opacity 0.7s ease-out 0.3s,
box-shadow 0.7s ease-out 0.3s;
-moz-transition:
opacity 0.7s ease-out 0.3s,
-moz-box-shadow 0.7s ease-out 0.3s;
-webkit-transition:
opacity 0.7s ease-out 0.3s,
-webkit-box-shadow 0.7s ease-out 0.3s;
}
.imgholder:hover .outer2{
opacity:1;
filter: alpha(opacity = 100);
box-shadow:0 0 20px #8EB9FF;
}
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
