Приветствую всех, кто читает шпаргалки блогерши. Сегодня вернёмся к картинкам. Ещё один красивый эффект анимации изображений при наведении курсора. Точнее предлагаю к просмотру 3 варианта такого эффекта. Всё работает полностью на CSS3 и поэтому установка будет лёгкой.
Нам сначала понадобится создать простой код HTML, а затем сами стили CSS, которые и сделают анимацию.
Код HTML для всех стилей одинаковый.
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="https://www.baby.ru/storage/2/7/4/5/996085.245684.jpeg" />
<figcaption class="caption">Детки</figcaption>
</figure>
</div>
Чтобы посмотреть каждый из эффектов, скопируйте код, приведённый выше. Зайдите на эту страницу и вставьте его в редактор. Затем установите под ним первый стиль и нажмите там на просмотр. И так с каждым стилем. Какой понравится, тот и забирайте себе для реализации.
Вариант 1.
Вариант 2.
Вариант 3.
Всё очень просто. В кодах CSS можно покопаться с размерами и цветом. Если будете применять у себя в постах, как всегда в режиме HTML устанавливайте в нужное место. Возможно придётся подкорректировать значения в этом участке, который отвечает за заголовок картинки.

Код HTML для всех стилей одинаковый.
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="https://www.baby.ru/storage/2/7/4/5/996085.245684.jpeg" />
<figcaption class="caption">Детки</figcaption>
</figure>
</div>
Чтобы посмотреть каждый из эффектов, скопируйте код, приведённый выше. Зайдите на эту страницу и вставьте его в редактор. Затем установите под ним первый стиль и нажмите там на просмотр. И так с каждым стилем. Какой понравится, тот и забирайте себе для реализации.
Вариант 1.
<style>
.imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
.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:30;
top:80%;
width:120px;
color:#004E87;
text-shadow:-1px -1px 0 #fff;
z-index:4;
}
.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;
}</style>
.imgholder{
position:relative;
width:120px;
height:120px;
border-radius:100px;
float:left;
margin:40px 30px;
}
.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:30;
top:80%;
width:120px;
color:#004E87;
text-shadow:-1px -1px 0 #fff;
z-index:4;
}
.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;
}</style>
Вариант 2.
<style>
.imgholder{
position:relative;
width:120px;
height:120px;
float:left;
margin:40px 30px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
/* thumbnails style */
.imgholder figure{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
margin:0;
overflow:hidden;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder img{
position:absolute;
left:0;
top:0px;
width:120px;
height:120px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition:
opacity 1s ease-in,
transform 1.5s;
-moz-transition:
opacity 1s ease-in,
-moz-transform 1.5s;
-webkit-transition:
opacity 1s ease-in,
-webkit-transform 1.5s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:40px;
top:40%;
width:130px;
opacity:1;
filter: alpha(opacity = 100);
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition:
opacity 1s,
transform 1s ease;
-moz-transition:
opacity 1s,
-moz-transform 1s ease;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
/* decoration 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 1.5s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-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 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition:
opacity 1s ease 0.3s,
transform 1s ease-out 0.3s;
-moz-transition:
opacity 1s ease 0.3s,
-moz-transform 1s ease-out 0.3s;
-webkit-transition:
opacity 1s ease 0.3s,
-webkit-transform 1s ease-out 0.3s;
}
.imgholder:hover .outer2{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}</style>
.imgholder{
position:relative;
width:120px;
height:120px;
float:left;
margin:40px 30px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
/* thumbnails style */
.imgholder figure{
position:absolute;
left:0;
top:0;
width:120px;
height:120px;
margin:0;
overflow:hidden;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder img{
position:absolute;
left:0;
top:0px;
width:120px;
height:120px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition:
opacity 1s ease-in,
transform 1.5s;
-moz-transition:
opacity 1s ease-in,
-moz-transform 1.5s;
-webkit-transition:
opacity 1s ease-in,
-webkit-transform 1.5s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:40px;
top:40%;
width:130px;
opacity:1;
filter: alpha(opacity = 100);
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition:
opacity 1s,
transform 1s ease;
-moz-transition:
opacity 1s,
-moz-transform 1s ease;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
/* decoration 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 1.5s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-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 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition:
opacity 1s ease 0.3s,
transform 1s ease-out 0.3s;
-moz-transition:
opacity 1s ease 0.3s,
-moz-transform 1s ease-out 0.3s;
-webkit-transition:
opacity 1s ease 0.3s,
-webkit-transform 1s ease-out 0.3s;
}
.imgholder:hover .outer2{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}</style>
Вариант 3.
<style>
.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;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:33px;
top:40%;
width:130px;
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}
.imgholder:hover figcaption{
top:120%;
}
/* 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-ox-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 );
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-box-shadow:0 0 10px #0285E2;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow:0 0 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);
transition:
opacity 0.5s,
transform 0.7s ease-out;
-moz-transition:
opacity 0.5s,
-moz-transform 0.7s ease-out;
-webkit-transition:
opacity 0.5s,
-webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
opacity:0.9;
filter: alpha(opacity = 90);
transform: scale(1,1) rotate(-10deg);
-ms-transform: scale(1,1) rotate(-10deg);
-moz-transform: scale(1,1) rotate(-10deg);
-webkit-transform: scale(1,1) rotate(-10deg);
}
</style>
.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;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:33px;
top:40%;
width:130px;
color:#004E87;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}
.imgholder:hover figcaption{
top:120%;
}
/* 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-ox-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 );
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow:0 0 10px #0285E2;
-moz-box-shadow:0 0 10px #0285E2;
-webkit-box-shadow:0 0 10px #0285E2;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.imgholder .outer2{
top:-18px;
left:-18px;
width:136px;
height:136px;
z-index:1;
border:10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow:0 0 20px #8EB9FF;
-moz-box-shadow:0 0 20px #8EB9FF;
-webkit-box-shadow:0 0 20px #8EB9FF;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);
transition:
opacity 0.5s,
transform 0.7s ease-out;
-moz-transition:
opacity 0.5s,
-moz-transform 0.7s ease-out;
-webkit-transition:
opacity 0.5s,
-webkit-transform 0.7s ease-out;
}
.imgholder:hover .outer2{
opacity:0.9;
filter: alpha(opacity = 90);
transform: scale(1,1) rotate(-10deg);
-ms-transform: scale(1,1) rotate(-10deg);
-moz-transform: scale(1,1) rotate(-10deg);
-webkit-transform: scale(1,1) rotate(-10deg);
}
</style>
Всё очень просто. В кодах CSS можно покопаться с размерами и цветом. Если будете применять у себя в постах, как всегда в режиме HTML устанавливайте в нужное место. Возможно придётся подкорректировать значения в этом участке, который отвечает за заголовок картинки.
.imgholder figcaption{
position:absolute;
left:30;
top:80%;
Спасибо за ваше внимание. Увидимся.
Здесь вы можете оформить подписку на новые шпаргалки
Вика, а могли бы подсказать (в интернете толком не нашел информации), как панорамы в блогспот вставлять, чтобы они нормально отображались?
ОтветитьУдалитьСемён. Я видела панорамы, только там довалась ссылка с переходом на просмотр. Сама как - то не интересовалась этим. Вот на форуме здесь http://www.panolab.com/forum/index.php?PHPSESSID=e1512ef6742e0b499e6810c999eac5c6&topic=3410.0 поднимался вопрос. А так не знаю .
УдалитьВика, спасибо
ОтветитьУдалитьСемён, если получится реализовать, дай знать, пожалуйста. Самой интересно стало.
УдалитьСпасибо за полезные советы. Пригодятся.
ОтветитьУдалитьПользуйтесь, Иван. Спасибо за спасибо.
Удалить