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

эффекты 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


4 комментария:

  1. Добрый день, Вика! В блоге "эксперименты", на представленной странице внизу сменяющиеся фото цветов с всплывающей подписью. Как это сделать? http://b-v-blog.blogspot.ru/search?updated-max=2015-09-02T11:19:00%2B05:00&max-results=3 Спасибо:))

    ОтветитьУдалить
    Ответы
    1. Лариса. Я пост об этом давно начала писать и не закончила. Спасибо, что напомнили. Напишу скоро, обязательно дам знать. Я правильно Вас поняла, Вы имеете ввиду слайдер.

      Удалить
    2. Вероятно да.. Я бросила ссылочку на страницу. Он внизу страницы:)) Будем ждать:))

      Удалить
    3. Да, Лариса. Поняла Вас. Будет.

      Удалить

Пользовательский поиск
Foto Saya
My Photo