Tenía muchas ganas de hacer esto y bueno, como me ha gustado el resultado lo comparto. Puede que vaya haciendo más.
Esto que os presento es un código HTML donde incrustar las imágenes directamente. Creo que puede ser útil para aquellos que no sepan utilizar Photoshop y, bueno, la tontería del hover que queda cúl.
Es un código muy fácil de usar para aquellos con unas nociones básicas de HTML, pero aún así os dejo una capturita explicativa para que cualquiera pueda usarlo.
— Para editar el color de los cuadros buscad c1-effect1 y c1-effect2, y editáis el atributo en línea background-color.
— Para editar el tamaño de letra en esos mismos cuadros buscad el atributo en línea font-size dentro de los citados c1-effect1 y c1-effect2.
— Las imágenes se redimensionan solas. En la captura tenéis los tamaños, aunque el propio código los señala.
— Está prohibido quitar, editar o escupir en el crédito.
— Cualquier duda, estoy a un ASK.