Здравствуйте, друзья. И опять о картинках. У меня уже целый цикл шпаргалок о том, как красиво можно оформить изображения в сообщениях блога. Красивые эффекты изображений при наведении курсора в этой статье. А здесь - качающаяся картинка.
Сегодня опять же, с помощью CSS, придадим им немного динамики.
Достаточно интересно и необычно смотрятся картинки на странице. Увеличение изображения при наведении на него курсора и появляющаяся тень, создают очень красивый эффект.
Код для такого эффекта приведён ниже. И, как всегда, разберёмся что к чему.
В строки, помеченные красным цветом, прописываем адрес картинки. Синим-alt изображения. Копируйте его, вставляйте адреса своих картинок. При написании сообщения в режиме HTML, в нужном месте устанавливаем готовый код. Эффект буден виден при просмотре поста.
Красота. И у меня сегодня всё. Спасибо, что читаете мои шпаргалки. До новых встреч.

Достаточно интересно и необычно смотрятся картинки на странице. Увеличение изображения при наведении на него курсора и появляющаяся тень, создают очень красивый эффект.
Код для такого эффекта приведён ниже. И, как всегда, разберёмся что к чему.
<div class="images" id="image1">
<div class="okno ">
</div>
<img alt="чудо " border="0" height="180" src=" http://shalena.net.ua/wp-content/uploads/2008/04/funny-3d-animals-wallpapers-28.jpg" width="180" />
</div>
<div class="images" id="image2">
<div class="okno ">
</div>
<img alt="###" border="0" height="180" src=" адрес картинки" width="180" />
</div>
<div class="images" id="image3">
<div class="okno ">
</div>
<img alt="### " border="0" height="180" src="адрес картинки" width="180" />
</div>
<div class="images" id="image4">
<div class="okno ">
</div>
<img alt="### " border="0" src="адрес картинки " height="180" width="180" />
</div>
<style>.images{
float:left;
margin: 20px;
-webkit-transform:scale(1.0);
-webkit-transition-duration: 0.5s;
-moz-transform:scale(1.0);
-moz-transition-duration: 0.5s;
-o-transform:scale(1.0);
-o-transition-duration: 0.5s;
}
.images:hover{
box-shadow:0px 0px 40px #669999 ;
-o-transform:scale(1.2);
-o-box-shadow:0px 0px 40px #669999;
-moz-transform:scale(1.2);
-moz-box-shadow:0px 0px 40px #669999;
-webkit-transform:scale(1.2);
-webkit-box-shadow:0px 0px 40px #669999;
}
.images .okno{
width: 200px;
height: 200px;
background-color:#000;
position: absolute;
opacity:0.5;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
}
#image1:hover .okno {
width:0%;
}
#image2:hover .okno {
height:0%;
}
#image3:hover .okno {
height:0%;
margin-top:100px;
}
#image4:hover .okno {
margin-left:100px;
margin-top:100px;
height:0%;
width:0%;
}</style>
</div>
<div class="okno ">
</div>
<img alt="чудо " border="0" height="180" src=" http://shalena.net.ua/wp-content/uploads/2008/04/funny-3d-animals-wallpapers-28.jpg" width="180" />
</div>
<div class="images" id="image2">
<div class="okno ">
</div>
<img alt="###" border="0" height="180" src=" адрес картинки" width="180" />
</div>
<div class="images" id="image3">
<div class="okno ">
</div>
<img alt="### " border="0" height="180" src="адрес картинки" width="180" />
</div>
<div class="images" id="image4">
<div class="okno ">
</div>
<img alt="### " border="0" src="адрес картинки " height="180" width="180" />
</div>
<style>.images{
float:left;
margin: 20px;
-webkit-transform:scale(1.0);
-webkit-transition-duration: 0.5s;
-moz-transform:scale(1.0);
-moz-transition-duration: 0.5s;
-o-transform:scale(1.0);
-o-transition-duration: 0.5s;
}
.images:hover{
box-shadow:0px 0px 40px #669999 ;
-o-transform:scale(1.2);
-o-box-shadow:0px 0px 40px #669999;
-moz-transform:scale(1.2);
-moz-box-shadow:0px 0px 40px #669999;
-webkit-transform:scale(1.2);
-webkit-box-shadow:0px 0px 40px #669999;
}
.images .okno{
width: 200px;
height: 200px;
background-color:#000;
position: absolute;
opacity:0.5;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
}
#image1:hover .okno {
width:0%;
}
#image2:hover .okno {
height:0%;
}
#image3:hover .okno {
height:0%;
margin-top:100px;
}
#image4:hover .okno {
margin-left:100px;
margin-top:100px;
height:0%;
width:0%;
}</style>
</div>
В строки, помеченные красным цветом, прописываем адрес картинки. Синим-alt изображения. Копируйте его, вставляйте адреса своих картинок. При написании сообщения в режиме HTML, в нужном месте устанавливаем готовый код. Эффект буден виден при просмотре поста.
Красота. И у меня сегодня всё. Спасибо, что читаете мои шпаргалки. До новых встреч.
оформите подписку на новые шпаргалки
Добрый день, Вика! В блоге "эксперименты", на представленной странице внизу сменяющиеся фото цветов с всплывающей подписью. Как это сделать? http://b-v-blog.blogspot.ru/search?updated-max=2015-09-02T11:19:00%2B05:00&max-results=3 Спасибо:))
ОтветитьУдалитьЛариса. Я пост об этом давно начала писать и не закончила. Спасибо, что напомнили. Напишу скоро, обязательно дам знать. Я правильно Вас поняла, Вы имеете ввиду слайдер.
УдалитьВероятно да.. Я бросила ссылочку на страницу. Он внизу страницы:)) Будем ждать:))
УдалитьДа, Лариса. Поняла Вас. Будет.
Удалить