Привет от Уелсайтър!
В този урок ще научите ефект който се прилага на снимки и го има в много сайтове.
Линк към готовия ефект и код: 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