{% else-1 %}
Плавное появление текста и фона на картинке при наведении на неё курсора!
Не забудьте, пожалуйста, поставить плюсик)

                        
*.html
<div class="div">
<span class="img">
<img src="images/Hight_School.png" />
<span class="text">
Ваш текст!
</span>
</span>
</div>

*.css
.div {
border-top: 1px solid #777;
text-align: center;
padding: 10px;
}
.text {
overflow: hidden;
display: block;
position: absolute;
margin-top: 3px;
bottom: 3px;
left: 0;
width: 100%;
height: 98%;
box-sizing: border-box;
color: #FFF;
text-align: left;
padding: 5px 10px;
opacity: 0;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
}
.text:hover {
background-color: rgba(0, 0, 0, .9);
opacity: 1;
}

.img {
display: inline-block;
position: relative;
}
2 33 0
0

Нет фото
• 27 июл 2014, 02:45


збс)

0

Нет фото
• 26 июл 2014, 08:39


margin-top: 3px; в диве .text не нужно