<figure> <img src="http://dbmast.ru/wp-content/uploads/2014/01/dbmast2.jpg"> <figcaption> <h2>Заголовок</h2> <p> Пример создания визуального эффкта выскальзывающей подписи к изображениям с применением только CSS3. </p> <p> Здесь можете разместить например, краткое описание товара, анонс статьи или представление работ портфолио. </p> <p> Всё что угодно, в зависимости от размера миниатюры и вашей неуёмной фантазии. </p> <a href="#">Ссылка »</a> </figcaption>
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } body { background-color: #666; background-image: linear-gradient(-123deg, #2d363d 0%, #677274 20%, #7a8485 28%, #9d9c98 61%, #c3b5a8 100%); display: flex; flex-direction: column; justify-content: center; } figure { width: 350px; height: 240px; margin: 0 auto; overflow: hidden; position: relative; text-align: left; -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25); cursor: default; font: normal 11px/15px Helvetica, Arial, sans-serif; } figure figcaption { width: 350px; height: 240px; position: absolute; overflow: hidden; top: 0; left: 0; background: #eee; -moz-transform: translateX(-350px); -o-transform: translateX(-350px); -webkit-transform: translateX(-350px); transform: translateX(-350px); visibility: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } figure img { display: block; position: relative; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } figure h2 { text-transform: uppercase; color: #333; position: relative; font-size: 17px; letter-spacing: 1px; margin: 20px 0 0 20px; } figure p { font-size: 12px; line-height: 17px; position: relative; color: #333; margin: 10px 0 10px 20px; width: 310px; -webkit-transition: all 0.4 ease-out; -moz-transition: all 0.4 ease-out; -ms-transition: all 0.4 ease-out; -o-transition: all 0.4 ease-out; transition: all 0.4 ease-out; } figure a { text-decoration: none; color: #359CC6; margin: 10px 0 10px 20px; } figure a:hover { color: #E88F00; border-bottom: 1px dotted #9F1D35; } figure:hover figcaption, figure:hover figcaption img { -moz-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; } figure:hover img { -moz-transform: translateX(350px); -o-transform: translateX(350px); -webkit-transform: translateX(350px); transform: translateX(350px); } figure:hover p { opacity: 1; }