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

                        
*.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;

}