Помогни ни да направим Uroci.net по - богат! Добави урок

Лесно и приятно hover ефектче на снимка

Websiter   трудност:    видян: 2582

Привет от Уелсайтър!

В този урок ще научите ефект който се прилага на снимки и го има в много сайтове.

 

Линк към готовия ефект и код: https://jsfiddle.net/jnswyskk/

Първо създайте си HTML документ.

 

Напишете следното:

     <figure>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/bifqk4sdl9mggfbcv9vf.jpg" class="attachment-shop_catalog wp-post-image" alt="1" height="300" width="400">
 

     <div id="effect">
            <h3>Title</h3>
                <span>this is an image</span>
                <a href="http://www.w3schools.com/default.asp">read more</a>
        </div>

    </figure>

На мястото на src в img тага напишете източника на снимката Ви. Figure тага се използва за съхранение на снимки, но можете да използвате и div. Тагът с id effect ще съхранява текст и линк, които да се показват при хувър

След това в CSS файла напишете следното:


figure{
       
        margin: 0px;
        padding: 0px;
        position: relative;
        font-family: Myriad Pro;
   
}

figure img{
   
    display: block;
    position: relative;
    z-index: 10;
    border: 1px solid grey;
      
   
}

#effect h3 {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 10px;
}
#effect span {
    color: #fff;
    display: block;
    line-height: 1.2;
    margin-top: 100px;
    font-size: 30px;
    font-family: Myriad Pro;
       
}
#effect {
    top: 0;
    left: 0;
    width: 400px;
    height: 300px;
    background-color: lightblue;
    text-align: center;
    position: absolute;
    z-index: 11;
    opacity: 0;
}

figure #effect:hover{
   
    opacity: 0.9;
}

Важното тук е че за да се появи светлото квадратче върху снимката трябва да използвате position: absolute, top:0,left: 0. Единствено figure може да има position: relative, за да изглежда нормално ако имате други елементи в уебсайта. Z-index стойността показва слоевете от елементи. В нашия случай светлото квадратче с текст се появява върху снимката, защото има по-голям z-index: 11>10, но не се вижда, защото имаме нулева прозрачност(opacity: 0;) Тя се променя при :hover.

Дано урокът е бил полезен!

 

Поздрави,

Websiter

 

 



Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини