Готовый код вставляем в редакторе сообщения в режиме HTML или в гаджет HTML/JavaScript.


Ещё красивые эффекты для картинок.
Код
<style>
#v-b {
position:relative;
height:250px;
width:250px;
margin:0 auto;
}
#v-b img {
position:absolute;
left:0;width:240px;height:240px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#v-b img.top {
-webkit-transform:scale(5,0);
-moz-transform:scale(5,0);
-o-transform:scale(5,0);
transform:scale(5,0);
opacity:0;
}
#v-b:hover img.top, #cf4.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-webkit-transform-origin: top right;
-moz-transform:scale(1,1);
-moz-transform-origin: top right;
-o-transform:scale(1,1);
-o-transform-origin: top right;
transform:scale(1,1);
transform-origin: top right;
}
#v-b:hover img.bottom, #cf4.hover_effect img.bottom {
-webkit-transform:scale(0,0);
-webkit-transform-origin: bottom left;
-moz-transform:scale(0,0);
-moz-transform-origin: bottom left;
-o-transform:scale(0,0);
-o-transform-origin: bottom left;
transform:scale(1,0);
transform-origin: bottom left;
}</style>
<div id="v-b " class="hover">
<img class="bottom shadow" src="адрес фото 1" />
<img class="top shadow" src="адрес фото 2" />
</div>
#v-b {
position:relative;
height:250px;
width:250px;
margin:0 auto;
}
#v-b img {
position:absolute;
left:0;width:240px;height:240px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#v-b img.top {
-webkit-transform:scale(5,0);
-moz-transform:scale(5,0);
-o-transform:scale(5,0);
transform:scale(5,0);
opacity:0;
}
#v-b:hover img.top, #cf4.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-webkit-transform-origin: top right;
-moz-transform:scale(1,1);
-moz-transform-origin: top right;
-o-transform:scale(1,1);
-o-transform-origin: top right;
transform:scale(1,1);
transform-origin: top right;
}
#v-b:hover img.bottom, #cf4.hover_effect img.bottom {
-webkit-transform:scale(0,0);
-webkit-transform-origin: bottom left;
-moz-transform:scale(0,0);
-moz-transform-origin: bottom left;
-o-transform:scale(0,0);
-o-transform-origin: bottom left;
transform:scale(1,0);
transform-origin: bottom left;
}</style>
<div id="v-b " class="hover">
<img class="bottom shadow" src="адрес фото 1" />
<img class="top shadow" src="адрес фото 2" />
</div>
Можно поменять значение transform:scale(5,0); на своё и тогда эффект смены изображения будет немного другим. Размеры отображаемых картинок заданы значениями height:250px; и width:250px; - тоже на ваше усмотрение.
Совет! Код устанавливайте после того, как сообщение будет уже написано, перейдя в режим HTML в нужное место. И после этого сразу публикуйте, не переходя в обычный. Иначе результата может не быть.
Не занимаю больше ваше драгоценное время. Спасибо за внимание и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Класс! интересный эффект.
ОтветитьУдалитьВиктория! ЗДОРОВО! УРА! Мне как раз этот эффект скоро пригодится для Блога Кота Васьки! Скажу по секрету: с января появится у меня соавтор.
ОтветитьУдалитьВиктория, ничего не получается у меня на тестовом блоге. Вставила код и в сообщение и в гаджет! Получилось и там и там - две картинки рядом! Не никакой смены изображений! Картинки должны быть одинакового размера? Поработаю с размерами!
ОтветитьУдалитьИрина, что-то не так сделано. Везде работает. Размер картинок не при чём. Они в коде заданы. Посмотри может картинки в htpp. Сейчас ведь это может к сбою приводить. Кинь свой код на почту мне.v.barad@mail.ru
ОтветитьУдалитьИли попробуй простую смену ссылка на тот пост в сообщении.
ВИКТОРИЯ, СПАСИБО! СПАСИБО! СПАСИБО! Я пока поставила на тестовый блог "БиблиоИрина". Все получилось! Мне нужна смена изображений на Блог Кота Васьки к 27 декабря, когда блогу исполнится 1 год И появится ещё один автор блога.
ОтветитьУдалитьПожалуйста Ирина. Успехов.
ОтветитьУдалитьВика, очень интересное решение, но у меня тоже получились две картинки рядом почему-то, адреса как обычно вставляю! И еще можно к вам обратиться по оформлению 3д постера, в тестовом блоге probtestez.blogspot.ru/2016/10/3-d-poster.html, я попыталась это сделать, у меня 1.проявился список в левом верхнем углу картинки; 2. на обороте картинка меньше чем в оригинале, уменьшилась в 2 раза в длину? (оригинал- sitehere.ru/examples/25.12.2013/index.html) а данные я взяла вот здесь (sitehere.ru/3d-postery-v-vide-boksov). Очень эффектная штучка, хочется ее использовать! С уважением Тата.
ОтветитьУдалитьTata там написано Для браузеров которые не поддерживают 3D трансформации нужно использовать библиотеку Modernizr.js, Обратитесь Юрию, автору кода, он обычно отвечает, знаю его.
ОтветитьУдалитьНе стоит наверное столько всего в один блог толкать.