Красивый hover эффект для изображений CSS

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

 Сегодня опять же, с помощью CSS, придадим им немного динамики.
 Достаточно интересно и необычно смотрятся картинки на странице. Увеличение изображения при наведении на него курсора и появляющаяся тень, создают очень красивый эффект.



Код для такого эффекта приведён ниже. И, как всегда, разберёмся что к чему.

<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>

В строки, помеченные красным цветом, прописываем адрес картинки. Синим-alt изображения. Копируйте его, вставляйте адреса своих картинок. При написании сообщения в режиме HTML, в нужном месте устанавливаем готовый код. Эффект буден виден при просмотре поста.

Красота. И у меня сегодня всё. Спасибо, что читаете мои шпаргалки. До новых встреч.

оформите подписку на новые шпаргалки

Введите Ваш email