Cómo crear un efecto de imagen manipulando el fondo con CSS3

En el tutorial del día de hoy vamos a crear un bonito efecto de imagen con texto revelador, donde manipularemos una propiedad muy interesante de CSS3 con las imágenes de fondo. Resulta que con CSS3 podemos manipular el tamaño de una imagen de fondo, de tal forma que si estamos buscando una forma de por ejemplo, hacer que una imagen se ajuste a todos los tamaño de una pantalla podemos hacerlo sin necesidad de usar varias imágenes.

Entonces, más o menos es como crearemos este efecto, que haga que cuando el cursor esté sobre la imagen la misma se redimensione y un pequeño texto aparezca como descripción de la misma. ¿Interesante verdad? pues a continuación el demo y el tutorial.x

Demo del tutorial

HTML

Nuestro HTML no es más que dos capas y un span para la descripción, realmente muy fácil en este sentido.

CSS

El CSS lo divido en dos partes, por un lado tenemos en si toda la función para que cuando el cursor esté sobre la capa la imagen de fondo se redimensione, dando lugar a un bonito efecto.

Lo último es más para darle formato a la descripción, y en cierto punto este paso es más personalizado por ustedes, pero con esto podemos ver que crear un efecto que a simple vista resulta un tanto complejo es extremadamente fácil de hacer con CSS3