[DUDA] Titulo flotante y desfasado a un lado - Como puedo hacerlo?

[matiD]

Como están? estoy pensando en un diseño, pero no se me ocurre como lo puedo realizar.

Mi conocimiento de CSS es bastante básico, y por ejemplo hacer lo que voy a mostrar a continuación con simples contenedores cuadrados me la ingenio pero quiero agregar unos detalles que he visto cosas similares en algunos sitios y me encantaría poder aplicar algo similar.

Sin más paso a dejar imágenes de lo que me gustaría hacer. Que como ya saben una imagen vale más que mil palabras.

Esto es en síntesis lo que quiero lograr. como se ve el titulo está un poco más abajo de la parte superior de la imagen, y sale hace un lado del contenedor, con lo que parece que estaría flotando sobre la imagen.


Es decir, una maquetación que en una linea muestre 3 noticias diferentes, y en la siguiente 2, en lugar de 3.

Pero lo más importante! Que es lo que realmente me complica es como hacer que el titulo de la noticia flote sobre la imagen que corresponde a la noticia!

yo hasta donde llego es a hacer los contenedores de cada noticia, y poner arriba el titulo abajo la imagen y abajo la noticia, pero no se me ocurre como puedo poner el titulo como se ve en la imagen un poco desfasado hacia la izquierda. cosa que se vea como un postit flotando.

Espero su ayuda en el caso de que puedan brindarmela.

Muchas gracias de antemano.

[pzin]

Es algo bastante simple de hacer.

Realmente el único problema que no sabrías resolver es el de sacar ese título fuera de su contenedor y que esté encima de la foto.

Para hacer superponer elementos, hay varias formas. En tu caso tendrías que darle a la caja del título, que vamos a suponer que es un h1, una posición absoluta, así puedes colocarlo encima de esa imagen.
Luego tendrías que poner la caja de la noticia con una posición relativa, así se crea una especie de contención para la posición absoluta del h1. Y en ese h1 indicas por ejemplo left: -20px y ya se un poco salido de ese contenedor.

Por ejmplo:

Código HTML:

<div class="noticia">
  <h1>Hola</h1>
</div>
 

Código CSS:

div.noticia {
  position: relative;
}
 
h1 {
  position: absolute;
  left: -20px;
}
 

Puse aquí un ejemplo que se asemeja más al ejemplo que pusiste: http://codepen.io/pzin/pen/tBgyd