Divs Duperpuestos - JSFiddle

Divs Superpuestos con textos

by Carlos Quintero

HTML

<div class="contenedor">
  <img src="http://elvenezolanocr.net/wp-content/uploads/2015/12/VINOTINTO.jpg " class="imagen"/>
  <div class="texto">
    <h1 class="titulo">TEMPORADA</h1>
    <h1 class="subtitulo">2006/2007</h1>
    <ul>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
      <li>Linea 1</li>
    </ul>
  </div>
</div>

CSS

.contenedor{
  position:relative;
  width:700px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
}
.imagen{
  width:700px !important;
  height:400px;
  position: absolute;
}
.texto{
  background-color:rgba(0,0,0,0.5);
  width:280px;
  height:360px;
  padding:20px;
  position:absolute;
  color:#ffffff;
  right:0
}
.texto .titulo{
  font-size:35px;
  color:#ffffff;
  text-align:right;
}
.texto .subtitulo{
  font-size:50px;
  color:#e2a428;
  text-align:right;
}
.texto ul{
  float:right;
}