Alinear imágenes fuera del margen del texto en Genesis Sample

Es algo que vi en un par de webs y me gustó mucho. Sin mirar el código pensé como lo haría yo y al principio me pareció un poco chapucero, pero me llevé una grata sorpresa al ver que es precisamente como estaba hecho. 

Es un simple código de CSS, pero el efecto es bastante llamativo y puede ser hasta práctico al mismo tiempo. Puedes crear espacios y romper visualmente un texto, simplemente añadiendo una imagen. 

El Código

Dependiendo como esté maquetado el tema que uses habrá que variar el código, pero lo que quiero es dejar reflejado es la idea general. Lo voy a hacer con Genesis Sample que se presta mucho a ello por tener una caja de contenido estrecha. 

A la imagen que incluyamos en el contenido y que queramos que tenga este efecto, tan sólo tendremos que agregarle una clase extra que será a la que le apliquemos el ancho extra. Esta clase se la aplicaremos a cualquier imagen que en el futuro le queramos dar este efecto.

En mi caso por seguir las directrices de Genesis y un poco la lógica del inglés, he usado alignwide. Pero ya os digo que podéis usar la que queráis. 

Ahora tan solo queda agregar el código CSS para permitir a la imágen que se salga del margen. Esto sólo lo haremos para pantallas grandes, luego el código ha de ir en las media queries respectivas. Bastará con añadir este código al final del archivo style.css del tema Genesis Sample. 

@media only screen and (min-width: 960px) {
	img.alignwide {
 		margin-left: -200px;
		margin-right: -200px;
 		max-width: calc(100% + 400px);
	}
 }

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.