Div в верхней части изображения в расширяющемся div

Я пытаюсь отобразить некоторый контент (значок слева, заголовок и текст справа) поверх изображения, которое находится внутри расширяющегося div. Я в основном делаю это, чтобы понять, можно ли это сделать, но было бы неплохо, если бы я мог сделать его функциональным. Я сшил функциональность вместе с несколькими учебниками, но не могу найти что-либо в Интернете о том, как закончить его.

Я изо всех сил пытаюсь развернуть div поверх волнового изображения.

вид здесь работает здесь

Я выложил его в таблице, чтобы вы могли примерно понять, как мне это нужно, я предполагаю, что мне нужно плавать, чтобы выложить divs, но не может заставить его работать. любая помощь была бы наиболее оценена.

<div );="">
 <div id="container">
 
 <div>
 <table>
 <tbody><tr>
 <td valign="bottom">
 
 </td>
 <td>
 <p><span>Hot Deals</span></p>
 <p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
 </td>
 </tr>
 </tbody></table>
 </div>
 </div>
 </div>
1 ответ

Я думаю, вы решили проблему самостоятельно.

Здесь JSFiddle: http://jsfiddle.net/D4J9H/7/

При использовании JSFiddle есть текстовое поле для содержимого HTML, текстовое поле для CSS и текстовое поле для кода Javascript. Вы написали все в текстовом поле CSS, поэтому результат не был тем, что вы ожидали.

HTML:

<div>
 <div id="container">
 
 <div>
 <table>
 <tbody><tr>
 <td valign="bottom">
 
 </td>
 <td>
 <p><span>Hot Deals</span>
 </p>
 <p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
 </td>
 </tr>
 </tbody></table>
 </div>
 </div>
</div>

CSS:

#container {
 position: absolute;
 bottom: 0;
 left: 0;
}
.grow {
 height: 200px;
 width: 499px;
 float: left;
 position: relative;
 transition: height 0.5s;
 -webkit-transition: height 0.5s;
 background-image: url(http://i128.photobucket.com/albums/p195/R3DG3CKO/sunset.jpg);
}
.grow:hover {
 height: 300px;
}

licensed under cc by-sa 3.0 with attribution.