Mostrar contenido al pasar el ratón

En Snook nos explican la forma de utilizar un contenedor y que al pasar el ratón nos muestre un contenido extra. El ejemplo del autor puede verse aquí.
Y añadiendo una imagen tal como sugiere el resultado sería el que vemos a continuación: 

Here's what you have.

Here's more of a description of what we have going on here.

Para hacerlo utilizamos CSS. Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.infobox {
    position:relative;
    border:1px solid #000; 
    background-color:#CCC;
    width:73px;
    padding:5px;
    }
.infobox img {
 position:relative;
 z-index:2;
    }
.infobox .more {
 display:none;
    }
.infobox:hover .more {
 display:block;
    position:absolute;
    z-index:1;
    left:-1px;
    top:-1px;
    width:73px;
    padding:78px 5px 5px;
    border:1px solid #900;
    background-color:#FFEFEF;
    }

Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Here's what you have.</div>
 <div class="more">Texto oculto</div>
</div> 

Retocando un poco el CSS podemos hacer lo mismo y que resulte algo más vistoso.

Bienvenidos a este blog!

Autodidacta por vocación y apasionada del diseño y todo lo relacionado con Blogger.
Colaboradora en www.reinventaweb.com

De igual forma nos situaríamos antes de ]]></b:skin> y añadimos los estilos:

<style type="text/css">
    .infobox {
    background-color: #FFFFFF;
    padding: 0;
    position: relative;
    width: 100px;
}
.infobox h2 {
    color: #000000;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 0 0 20px !important;
    padding: 0 0 0 10px !important;
    text-align: left;
    text-shadow: 1px 1px 0 #CCCCCC;
    text-transform: none;
}
.infobox img {
    border: 3px solid #FFFFFF;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 1px 1px 1px #333333;
    float: left;
    margin: 10px 25px 5px 10px;
    opacity: 0.9;
    position: relative;
    width: 95px;
    z-index: 2;
}
.infobox .more {
    display: none;
}
.infobox:hover .more {
    background-color: #BF7195;
    border: 3px double #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    left: 0;
    padding: 15px 10px 10px 120px;
    position: absolute;
    top: -10px;
    width: 200px;
    z-index: 1;
    height: 135px;
}
.infobox:hover a {
  text-shadow: none;
    color: #000000;
}
</style>

<div class="more">
<span style="color: white; font-family: Arial, Verdana,Tahoma,; font-size: 12px; text-shadow: 1px 1px 1px #000000;">Contenido oculto<br> Texto en negrita </span><a target="_blank" href="Url-del-enlace">Texto enlace</a></div>
</div>

Los cambios a realizar está detallados en el HTML, en "Contenido oculto" lo sustituimos por el contenido que deseamos mostrar. "Texto en negrita" es el texto final y si no lo deseamos simplemente eliminamos la línea de texto.

Y por último donde "Url-del-enlace" y "Texto-enlace" lo sustituimos también por el nuestro o simplemente eliminamos esa linea pero respetando los dos cierres finales de la etiqueta </div>

Hace unos años cuando se hablaba de transiciones uno se imaginaba que en un futuro podríamos crear efectos fantásticos utilizando solamente CSS y así ha sido.

 Vagabundia definía muy bien lo que es una transición diciendo "Una transición es aquello que ocurre entre un momento y otro" recomiendo a quien esté interesado visitar su blog para comprender y aprender a utilizar las transiciones.

El abanico de efectos es muy amplio, hace unos meses aquí hablamos sobre "Transición entre colores con animación" o "Transición con CSS3 en una imagen"

Este otro efecto de hoy lo he visto en Codrops es el que más me ha gustado de los que ofrece en esta demo

Para conseguir este efecto nos situamos en plantilla en edición de HTML y justo antes de ]]></b:skin> añadimos el CSS. 

.ch-item {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 100%;
    position: relative;
    width: 100%;
}
.ch-info-wrap {
    background: transparent url(URL) repeat scroll 0 0 ;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
    height: 180px;
    left: 20px;
    perspective: 800px;
    position: absolute;
    top: 20px;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info {
    border-radius: 50% 50% 50% 50%;
    height: 180px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info > div {
    backface-visibility: hidden;
    background-position: center center;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.ch-info .ch-info-back {
    background: none repeat scroll 0 0 #000000;
    transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
    background-image: url("url-imagen-220x220");
}
.ch-info h3 {
    color: #FFFFFF;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 14px;
    height: 50px;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 40px 0 0;
    text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.ch-info p {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
    margin: 0 30px;
    padding: 10px 5px;
}
.ch-info p a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
    text-transform: uppercase;
}
.ch-info p a:hover {
    color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
    transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
    display: block;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.ch-grid:after, .ch-item:before {
    content: "";
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    display: inline-block;
    height: 220px;
    margin: 20px;
    width: 220px;
}

Donde dice url-imagen-220x220 es el lugar para pegar nuestra imagen.

.ch-img-1 { 
 background-image: url("url-imagen-220x220"); 
} 

 Guardamos los cambios y el HTML lo añadimos donde deseamos mostrar el efecto.

<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-1'>               
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-1'></div>
                <div class='ch-info-back'>
                    <h3>AQUÍ-TÍTULO</h3>
                    <p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
                </div>   
            </div>
        </div>
    </div>
</li>
</ul>

En el HTML es el lugar donde añadiremos el título, subtitulo y enlace.

Los generadores nos ahorran mucho tiempo porque vemos en vista previa el resultado en lugar de hacer una y mil pruebas.
Con border-image-generator conseguimos que cualquier imagen sea el borde de nuestras imágenes para el blog. Lo ideal, sería que la imagen para el borde sea tipo textura o con motivos no demasiado grandes.

Si marcamos la casilla "Fill Center" conseguimos que la imagen ocupe también el fondo, esto puede ser útil cuando añadimos imágenes png. (fondo transparente)

Para que ese borde se muestre en nuestras imágenes del blog buscamos en la plantilla algo así:

 .post img, table.tr-caption-container { 
  padding:4px; 
  border:1px solid $bordercolor; 
}

Eliminamos lo marcado en rojo y ahí añadimos los estilos que nos proporciona el generador.

No guardes los cambios hasta comprobar en vista previa que todo está correcto.

Los efectos en imágenes siempre resultan atrayentes, este en concreto muestra una transición suave utilizando CSS3.

Para hacerlo necesitamos dos imágenes de la misma medida y que esa medida esté indicada en los estilos, es decir, que todas las imágenes a mostrar con este efecto tendrán la misma medida.

Los estilos los añadimos en plantilla edición de HTML justo antes de ]]></b:skin>

Si la imagen la añadimos en un gadget de HTML también podemos añadir los estilos en su interior sin olvidar envolverlos con las etiquetas <style> y </style>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px; /* anchura de la imagen */
height: 434px; /* altura de la imagen */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,550px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

Las imágenes las añadimos ahí donde deseamos mostrarlas, ya sea un post o un gadget.

<a class="nowandthen">
 <img src="Url-imagen-beforejt.jpg" alt="">
 <img src="Url-imagen-afteruc.jpg" alt="">
</a>

REFERENCIADynamicdrive

¡HOLA!
¿qué tal?

En webintenta nos muestran la posibilidad de crear algunas animaciones sin Javascript o Flash. 

El ejemplo que vemos es el resultado de una transición entre colores y una animación rotando una capa y escalándola. 

.circulo { display:table-cell; border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 height:100px;
 width:100px;
 text-align:center;
 vertical-align:middle; }

.circulo span{
color:#000;
 font-family:Arial, Helvetica, sans-serif;
 font-size:21px;
}

/* Para navegadores webkit */
@-webkit-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}

/* Para firefox */
@-moz-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
 0% {-moz-transform:scale(1) rotate(0deg);}
 50% {-moz-transform:scale(1.5) rotate(180deg);}
 100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo {
-webkit-animation:cambiar_color 8s linear 1;
 -moz-animation:cambiar_color 8s linear 1;
 -webkit-animation:rotar 4s infinite;
 -moz-animation:rotar 4s infinite;
}

<div class="circulo">
¡HOLA!<br /> ¿qué tal?</div>

Vamos a quitar o mejor dicho conseguir que el borde que tenemos definido para las imágenes no salga siempre sino cuando nosotros queremos que salga porque a según que imágenes las afean bastante.

Cuando una imagen tiene borde o se lo hemos añadido con algún editor de imágenes va a resultar que al subirla desde una entrada nos mostrará entonces dos bordes, el que viene definido en los estilos y que le añadimos manualmente.

También es posible que la imagen tenga el mismo color de fondo que nuestro blog y si no le añadimos borde dará la impresión de estar más integrada.

La solución es crear una clase que la vamos a llamar "sinborde" y tendrá las propiedades necesarias para no mostrar el borde.

.post img.sinborde {
border:none !important;
padding:0 !important;
}

Esa parte la podemos añadir justo antes de ]]></b:skin> y donde vamos a mostrar la imagen añadimos el HTML

<img class="sinborde" src="url-imagen"/>

Añadir la url no quiere decir que tengamos que subir la imagen a un servidor externo, sino que la subimos en la misma entrada y una vez nos proporciona el código de la imagen lo desechamos todo menos la url de la imagen que la pegaremos en su lugar correspondiente "url-imagen"

Lo mismo ocurrirá si a una imagen concreta no deseamos añadir el mismo borde que al resto.

Creamos un borde especial como hicimos anteriormente y le damos distinto nombre a los estilos, de esa forma tendremos cualquier tipo de borde a mano porque sólo tendremos que copiar el HTML ya que los estilos se añaden una sola vez.

Diez ejemplos de texto con sombra que podemos conseguir de forma muy fácil, hacemos click sobre cada ejemplo y nos mostrará los estilos que añadiremos en plantilla edición de HTML justo antes de ]]></b:skin>

El HTML lo añadimos donde deseamos mostrar el efecto (plantilla, entrada o gadget de HTML). Para conseguir el efecto en título del blog, entradas o sidebar añadimos los estilos en la parte correspondiente al título por ejemplo en header h1 aunque puede cambiar dependiendo de la plantilla que estamos usando.

Para el HTML añadimos lo siguiente cambiando el id por el número del ejemplo que vamos a añadir.

<div id="shadow1">
TEXTO
</div>

shadow 1

#shadow1 {
color: #DA1B62;
font-family: 'Leckerli One',cursive;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 4px 4px 0 rgba(255, 255, 255, 0.8), 10px 10px 0 rgba(187, 187, 187, 0.5);
}

shadow 2

#shadow2 {
color: #FE6602;
font-family: 'Aclonica',serif;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;
letter-spacing: 1px;
}

shadow 3

#shadow3 {
color: white;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0.1em 0.1em 0.2em black;
}

shadow 4

#shadow4 {
color: #44CCF6;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

shadow 5

#shadow5 {
color: rgba(0, 174, 239, 0.2);
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 5px 2px rgba(0, 0, 30, 0.08);
}

shadow 6

#shadow6 {
color: #FFFFFF;
font-size: 105px;
font-weight: bold;
font-family: "League-Gothic",Courier;
text-transform: uppercase;
text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -10px 60px #CD4606, 0 -10px 70px #973716, 10px -20px 80px #451B0E;
}

shadow 7

#shadow7 {
color: #006666;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}

shadow 8

#shadow8 {
color: #fff;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

shadow 9

#shadow9 {
color: #F9BAD4;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 2px 0 #F48CB7, 0 4px 0 #FBDAE8, 0 6px 0 #F48CB7, 0 8px 0 #F48CB7, 3px 8px 15px #FBDAE8, 3px 8px 5px #F48CB7;
}

shadow 10

#shadow10 {
color: #C10230;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 10px 21px 11px #000000;
}

En Dinamic Drive nos muestran una animación de fotogramas con CSS3.

El efecto muestra el deslizamiento de una imagen que permanece oculta y se sitúa sobre la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.

Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.

Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.

(No es necesario añadir los dos ejemplos, son como referencia para añadir el tamaño de la que será la primera imagen)

A continuación de las imágenes copiamos y pegamos los estilos:

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquí estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}

</style>

- En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.

Para hacer esto que pregunta Abraham utilizamos el evento onMouseOver que se ejecuta cuando pasamos la flecha del mouse sobre un objeto en este caso un enlace y el evento onMouseOut cuando la flecha lo abandona.

<a href="url-enlace"><img onmouseout="this.src='url-imagen-1';" onmouseover="this.src='url-imagen-2';" src="url-imagen-1;" /></a>

En Codrops nos tiene acostumbrados a estupendos efectos que invitan a ponerlos en práctica, uno de los últimos trata de una selección de efectos hover para añadir a imágenes y formar así una vistosa galería. En el menú superior de la demo podemos observar el resultado.

La falta de tiempo me impide probar los 10 efectos distintos pero no he podido remediar ver el resultado del ejemplo 3 y tocando un poquito aquí y allá los estilos ha quedado como la muestra con borde en las imágenes, sombra en el texto y cambiando el color de fondo.

Para conseguir un efecto igual nos situamos antes de ]]></b:skin> y añadimos los estilos, es ahí en los estilos dónde veremos las partes que podemos variar como por ejemplo color de texto y fondo para que sea acorde con el sitio.

.view {
    background-color:#FFFFFF;  /* fondo borde */  
    border: 10px solid #FFFFFF;  /* color borde */  
    box-shadow: 2px 3px 5px #696969;  /* sombra borde */ 
    cursor: default;
    float: left;
    height: 200px; /* alto de la imagen */ 
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* ancho de la imagen */ 
}
.view .mask, .view .content {
    height: 200px; /* alto del contenido es el mismo que el de la imagen */ 
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* ancho del contenido es el mismo que de la imagen */ 
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF;
    font-family: Georgia,serif;
    font-size: 12px;
    font-style: italic;
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
   background-color: rgba(0,0,0,0.6);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 { 
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
 -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
 background: none repeat scroll 0 0 #9C1813; /* Título */ 
  border-top: 1px solid #000;  /* color borde top título */ 
  border-bottom: 1px solid #000;  /* color borde bottom título */ 
  text-shadow: 0px 1px 1px #111; /* sombra título */ 
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
 background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ 
border: 1px solid #000;  /* color borde enlace leer más */    
    color:#FFFFFF; /* color enlace leer más */ 
    text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
} 

En un gadget de HTML añadimos lo siguiente:

<div class="view view-third">
<img src="Url-imagen" />
<div class="mask">
<h2>Título</h2>
<p>Cualquier descripción</p>
<a class="info" href="Url-enlace">Leer más</a>
</div>
</div>

En Url-imagen es el lugar para añadir la url de nuestra imagen y en Url-enlace pondremos la url del sitio a enlazar.

157 x 157

Esto que vemos es un marco que utilizaremos para enmarcar algunas imágenes o contenido. Lo podemos crear con algún editor de imágenes y lo único necesario es que nuestro marco tenga el fondo transparente para que poder visualizar ese fondo que deseamos mostrar.

Una vez tenemos nuestro marco nos situamos justo antes de ]]></b:skin> y añadimos los estilos para el marco:

.imageborder{

border-width: 25px 30px;

-moz-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-webkit-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-o-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-ms-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

}

Donde URL-IMAGEN-MARCO añadimos la url de nuestra imagen que podemos conseguirla subiendola a una entrada cualquiera o a nuestro álbum de Picasa,  luego nos dirigimos a la entrada o sitio que añadiremos el marco y escribimos lo siguiente:

<div class="imageborder" style="width:420px;height:300px;background:url (URL-IMAGEN-A- MOSTRAR) center center no-repeat">

</div>

En URL-IMAGEN-A-MOSTRAR es el lugar para añadir la url de la imagen que será enmarcada.

Con width establecemos la anchura de ese  marco y con height la altura de esa forma podemos adaptar el marco a la medida de la imagen.

<div class="imageborder" style="width:200px;height:160px;background:url (URL-IMAGEN-A-MOSTRAR) center center no-repeat"></div> 

Si en lugar de mostrar una imagen queremos mostrar contenido lo que hacemos es sustituir el código de la imagen por el contenido a añadir:

<div class="imageborder" style="width:50%;min-height:150px"> AQUÍ EL CONTENIDO </div> 

Puede visualizarse en todos los navegadores excepto IE (como de IE9)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

REFERENCIA:Dynamic Drive

Dicen que las ideas son como imágenes que se encuentran en nuestra mente, yo diría que ideas e imaginación caminan de la mano. Algunas personas nacen con un don especial para imaginar y ver más allá de lo que nadie alcanza a ver. Otras, desarrollan esa facultad con estudios y otros sistemas de aprendizaje. 

Y como hablamos de diseño y una imagen vale más que mil palabras traigo un enlace que me ha gustado mucho, se trata de CSS Gallery es un sitio donde podemos ver infinidad de diseños realizados con CSS.

Gracias a la nube de etiquetas en "Layout Components" podemos descubrir ideas que se pueden aplicar a distintas partes de nuestra plantilla.

NO, no dije que sean plantillas para Blogger, digo que son ideas a tener en cuenta para cuando asaltan esas dudas y no sabemos que cosa cambiar o que colores nos vendría bien.

Vale la pena visitar la nube y la sección de Header, Footer, Horizontal Nav, Buttom...
Si no te gusta lo que ves en tu blog esta en tus manos cambiarlo.

Los generadores nos ofrecen ya casi todo, efectos en imágenes, montajes de fotografías o código a cambio de unos cuantos clicks como por ejemplo Theme Shock.com que nos proporciona todos las propiedades posibles para añadir sombra a cualquier texto.

Para probarlo vamos escogiendo en los distintos botones el tipo de sombra, también tenemos la opción de escoger la fuente y nos resultará familiar que todas son fuentes de Google Font Api eso quiere decir que también obtenemos la línea de código necesaria para añadirla en nuestra plantilla sin necesidad de buscar en el directorio de fuentes de Google.

Por si no recuerdan el lugar indicado para añadir las fuentes de Google se lo recordamos aquí.

Hay una entrada de hace bastante tiempo con los pasos a seguir para añadir una lupa sobre las imágenes y quien dice una lupa dice cualquier otra imagen.

En el blog de Oloman vi otra forma de hacerlo incluso con más variantes consiguiendo efectos muy llamativos.

El HTML lo podemos añadir en cualquier parte que admita código es decir entradas, plantilla y gadget de html.

<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>

Los estilos se añaden justo antes de ]]></b:skin>
#contenedor {
position: relative;
}
.miniatura {
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}

Para añadir una imagen de descarga o lupa que parece que es de interés general es suficiente como explica Oloman cambiando en los estilos de "miniatura span" la altura que tenemos en top:0px y dejar más espacio a la izquierda en left:0px  de esa forma centramos la segunda imagen. El único cambio que hice fue sustituir javascript:void(0) por la url del enlace ya sea un enlace externo o dentro del mismo blog.

  
Quedaría algo así:

<div id="contenedor">
<a class="miniatura" href="URL-ENLACE">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>

.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:60px;
left:120px;
}


Una recomendación, no es conveniente que una vez editada la entrada en HTML hagamos comprobaciones para ver el resultado en Redactar porque se altera el código y se pierde la etiqueta span. Es mucho mejor utilizar el vista previa.

Hace unos días me preguntaba Graciela por el efecto que tiene la imagen de la sidebar "Blog de la semana" le respondí pero me pareció que un comentario no da para ejemplos y como también me preguntan por el efecto de la arroba del logo y es el mismo  pues  aquí va una respuesta más detallada.

(15deg)

(90deg)

(360deg)

El HTML lo añadimos donde vamos a mostrar el efecto de la siguiente forma:

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Si no queremos que la imagen sea un enlace añadimos sólo el código para imagen y la clase imagerotate.
<div class="imagerotate">
<img src="URL-IMAGEN"/>
</div>

Y los estilos justo antes de ]]></b:skin> 

.imagerotate img {

-moz-border-radius:5px;

-moz-transition: -moz-transform 1s ease 0s;

background:#B292A9 !important;

border: 1px solid #ffffff !important;

border-radius: 5px 5px 5px 5px;

height: 150px; margin: 5px;

padding: 0px;

position: relative;

width: 220px;

}

.imagerotate img:hover {

background:#AD184E !important;

-moz-transform:rotate(5deg);

-o-transform:rotate(5deg);

-webkit-transform:rotate(5deg);

-ms-transform:rotate(15deg);

}

Según deseamos que el movimiento de un giro mayor aumentamos o disminuimos el valor de  (deg)
La referencia de esta entrada es de Vagabundia que nos muestra otras transformaciones con CSS

Hace unos días para responder a una pregunta estuve probando la forma de añadir un marco a todas las imágenes de los post. El marco es una imagen más o menos como el ejemplo que ilustra la entrada y lógicamente como se trata de una imagen es necesario que todas las imágenes de los post tenga la misma medida a no ser que en alguna ocasión prescindamos de ese marco utilizando html.

La idea, lo que se tenía muy claro era no tener que utilizar ningún código cada vez, ni tan siquiera añadiéndolo a la plantilla de entrada, la idea era subir la imagen en un post y que automáticamente se visualizara con el marco.

Y claro, una a veces piensa,  incluso piensa detenidamente como si en lugar de pensar estuviéramos descubriendo la rueda. Luego de pensar y probar hice lo de otras veces consultar  esferas superiores es decir Vagabundia porque allí además de pensar siempre dan buenos remedios como en este caso .

 Para empezar estaría bien saber que la parte que añade estilos a los bordes en las imágenes de los post viene representada en la plantilla más o menos así:

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

}

.tr-caption-container img {

border: none;

padding: 0;

}

 De todo eso se podría prescindir ya que con lo siguiente sería suficiente

.post-body img {

padding:4px;

border:1px solid $bordercolor;

}

Con lo anterior ya podemos añadir estilos a los bordes, y no sólo es suficiente sino que de esa forma el borde sólo se añade a las imágenes subidas a los pots, lógicamente en post.body img tendríamos que añadir nuestros estilos de borde pero no en este caso que le vamos a añadir una imagen.

En este caso dejamos esa parte así:

.post-body img {

padding:0;

}

Antes de seguir guardamos los cambios y nos situamos en el editor de entradas, subimos una imagen y en html nos da un código así:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s320/27-6-2011+1.6.43+1.jpg" imageanchor="1" style=""><img border="0" height="300" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s400/27-6-2011+1.6.43+1.jpg" /></a></div>

Si nos fijamos Blogger añade una clase "class="separator" aprovechamos esa clase y en la plantilla añadimos justo antes de ]]></b:skin>

.separator {

height: 300px;

margin: 0 auto !important;

position: relative;

width: 400px;

}

.separator:after {

content: url("url-imagen-del-marco-400x300");

left: 0;

position: absolute;

top: 0;

}

Para el ejemplo he creado unos marcos de 400px ancho x 300px alto, esa es la medida que añadimos en los estilos de separator. Si deseamos mostrar nuestras imágenes de distinto tamaño cuidaremos que también ese tamaño coincida con la anchura y altura en los estilos.

Si el marco fuera una imagen desigual es posible que tengamos que hacer ajustes hasta ubicar la imagen en el centro del marco.

En la entrada no tenemos que añadir nada, simplemente subimos la imagen y ajustamos la medida indicada en Edición de HTML y listo.
<imgborder="0"height="300"width="400"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s400/27-6-2011+1.6.43+1.jpg" />

Esto que vemos no es más que un pasatiempo de esos que surgen a raíz de algo que vemos y decidimos probar, el resultado es una pequeña galería que podemos añadir al footer o alguna página estática.

No hay límite de imágenes y aunque en el ejemplo el borde es de color gris en cualquier blog las imágenes se mostrarán con el borde que tengamos definido para las imágenes de los post, si no tuviéramos borde entonces se mostraría tal y como vemos en el ejemplo.

Los estilos los añadiremos justo antes de ]]></b:skin>

#galeria ul {
 overflow: hidden;
 padding-top: 5px;
}
#galeria ul li {
 display: inline;
}
#galeria ul li a {
 display: block;
 float: left;
 width: 200px;
 margin: 0 10px 20px;
}
#galeria ul li a img {
 display: block;
 width: 200px;
 height: 125px;
 margin: -5px 0 0 -5px;
 border: 5px solid rgb(250, 250, 250);
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
 border-color: rgb(235, 235, 235);
}
#galeria ul li a:active img {
 margin: -4px 0 -1px -5px;
}
#galeria ul li a span {
 width: 195px;
 position:relative;
 height: 20px;
 display: block;
 color: rgb(242, 242, 242);
 font-size: 15px;
 line-height: 18px;
 letter-spacing: 0px;
 word-spacing: 3px;
 text-transform: uppercase;
 padding: 2px;
 background-color: #191919;
 margin-top: -30px;
 text-indent: 4px;
 /*+opacity:70%;*/
 filter: alpha(opacity=70);
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 -moz-opacity: 0.7;
 opacity: 0.7;
}
#galeria ul li.newfaces-icon a span {
 display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
 color: rgb(205, 72, 72);
}

Y el HTML allí donde deseamos mostrarlo.

<section id="galeria">
<ul>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
</ul>
</section>

Donde URL-IMAGEN lo sustituimos por la url de nuestra imagen a mostrar, en Título añadimos el texto y en URL-ENLACE es el espacio para añadir la url del sitio si deseamos que la imagen sea un enlace.

Las imágenes miden 200 x 150 las del ejemplo son gentileza de Wallpapers a full

Si tenemos una imagen de fondo en el blog podemos añadirle un efecto que le aporte calidez con una segunda imagen de fondo.

Imagen única en body

Resultado con pattern

La segunda imagen que añadiremos será de tipo pattern este tipo de imágenes se usan en la repetición de elementos gráficos. El formato aconsejado es png (fondo transparente) porque esa transparencia será la que permitirá visualizar la imagen de body.
Para el tamaño escogeremos 2x2. El resultado sería algo así.

Si visualizamos el blog a gran tamaño será más perceptible la imagen que añadimos de fondo transparente.

Los estilos de body los dejaremos como están con la imagen de fondo que ya teníamos añadida, si no la tenemos podemos ver la forma de añadirla en las siguientes entradas. 1 - 2

Justo antes de ]]></b:skin> añadiremos los estilos para la imagen que hemos creado.

.background2 {

width:100%;

height:100%;

position:fixed;

top:0px;

left:0px;

background:transparent url(Url-pattern-png) repeat top left;

}

Luego buscamos <div id='content-wrapper'> y justo después añadimos:

<div class="background2"></div>

En la anterior entrada veíamos un generador de CSS3 que nos proporciona el código y sería algo así: Ver código

-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: 1px 1px 7px #20B2AA;
-moz-box-shadow: 1px 1px 7px #20B2AA;
box-shadow: 1px 1px 7px #20B2AA;
text-shadow: 0px 0px 2px #000000;
background-image: -moz-linear-gradient(top, #20B2AA, #E0FFFF);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #20B2AA), color-stop(1.0, #E0FFFF));
background-color: #DDDDDD;
padding: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
color: #FFFFFF;
text-align: left;

Para hacer uso de ese código tenemos que localizar el lugar que deseamos aplicar esas propiedades.

Para personalizar los post, buscamos en la plantilla:

.post {

aquí añadimos el código

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

Si lo que deseamos es personalizar los gadgets de la sidebar buscamos:

.sidebar .widget {

aquí añadimos el código

margin:0 0 1.5em;

padding:0 0 1.5em;

}

Bloque que acoge la sidebar:

#sidebar-wrapper {

aquí añadimos el código

width: 220px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

Header o cabecera:

#header-wrapper {

aquí añadimos el código

width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Bloque que acoge todas las entradas:

#main-wrapper {

aquí añadimos el código

width: 410px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

Footer:

#footer {

aquí añadimos el código

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Bloque que acoge todo el blog:

#outer-wrapper {

aquí añadimos el código

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Todos esos bloques tienen contenido y es probable que tengamos que ajustar el padding de forma que quede espacio suficiente de separación entre contenido y borde.

Tendremos en cuenta también que si lo que deseamos es añadir fondo y borde no es necesario hacer uso de las opciones para texto:

font-family: Verdana, Geneva, sans-serif;

font-size: 11pt;

color: #FFFFFF;

text-align: left;

Es innecesario añadirlas porque esas propiedades ya las tenemos en nuestra plantilla, igual que ocurre con padding.

Para añadir un gadget de HTML podemos añadir en la plantilla antes de ]]></b:skin> una clase  en este caso "gadget-html" en este caso si añadimos todo el código que nos proporciona el generador porque son estilos que no tenemos añadidos a la plantilla.

#gadget-html {

aquí todo el código del generador

}

Editamos un gadget de HTML y en su interior añadimos:

<div id="gadget-html">

Aquí añadimos el contenido.

</div>

Esta entrada no es una entrada, tampoco una prueba, es el resultado de jugar con propiedades y de quedarse embobado utilizando CSS.

El culpable autor de este juego es JMiur porque lo que vemos aquí es lo más parecido a un cóctel de sus últimas entradas sobre Transformaciones y Superponer cosas. Un cóctel que contiene otros ingredientes como Rotaciones  y Gradient.

No sé si voy a saber explicarlo pero lo voy a intentar porque es una de esas cosas que van surgiendo sobre la marcha por eso recomiendo leer los enlaces a las explicaciones de JMiur  porque es muy interesante aprovechar esas propiedades a nuestro alcance y comprobar que podemos mostrar las imágenes de forma divertida.

Menaje Hogar

Lo primero que añadí fue el bloque contenedor de las imágenes, este ejemplo lo hice en una entrada, si deseamos añadirlo en un gadget de HTML podemos copiar el código desde la pestaña Edición de HTML y luego pegarlo en el gadget.

El bloque lo añadimos de la siguiente forma:

<div style="background: #CCC1A6 url (URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 1px solid #867B5C;">

CONTENIDO DEL BLOQUE

</div>

CONTENIDO DEL BLOQUE

Al contenedor le añadimos también el valor relative para ubicar el contenido en cualquier sitio.

<div style="background: #CCC1A6 url(URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 2px solid #867B5C;">

<div style="position: relative;">

CONTENIDO DEL BLOQUE

</div></div>

El contenido lo añadimos de la siguiente forma:

Imagen grande

<div style="left: 30px; position: absolute; top: -50px; z-index: 1;">

<div class="image-rotate ">

<img src="URL IMAGEN GRANDE" />

</div></div>

Bloque de texto

<div style="top: -65px; position: absolute; right:5px;z-index:3;">

<div id="superponer">

<h5><span>M</span>enaje <span>H</span>ogar </h5>

</div></div>

Menaje Hogar

Imagen pequeña

<div style="bottom: -230px; position: absolute; right: 30px; z-index: 2;">

<div class="image-rotate2 ">

<img src="URL DE NUESTRA IMAGEN PEQUEÑA" />

</div></div>

Menaje Hogar

Las imágenes podemos subirlas a Blogger y utilizar el tamaño s320 para la grande y s200 para la pequeña.

Utilizamos la propiedad z-index para posicionar la imagen, la numeración nos indica que lugar adopta la imagen, a menor numeración la imagen se posiciona la primera y conforme aumentamos la imagen se va posicionando sobre las anteriores.

Como resultado obtendríamos un código así:

<div style="background: #CCC1A6 url (URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 2px solid #867B5C;">

<div style="position: relative;">

<div style="left: 30px; position: absolute; top: -50px; z-index: 1;">

<div class="image-rotate ">

<img src="URL IMAGEN GRANDE" />

</div></div>

<div style="top: -65px; position: absolute; right:5px;z-index:3;">

<div id="superponer">

<h5><span>M</span>enaje <span>H</span>ogar </h5>

</div></div>

<div style="bottom: -230px; position: absolute; right: 30px; z-index: 2;">

<div class="image-rotate2 ">

<img src="URL  IMAGEN PEQUEÑA" />

</div></div>

</div></div>

Falta algo muy importante, son los estilos que añadiremos justo después del bloque, en el interior de la entrada si es un ejemplo que mostraremos una vez, lo hacemos así para no recargar la plantilla de código que no usamos normalmente.

<style>
.image-rotate { /* imagen grande */
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.image-rotate2 { /* imagen pequeña*/
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#superponer { /* bloque de texto*/
position: relative;
text-align: center;
border: 2px solid #CCC1A7;
padding: 42px 9px 5px 8px;
width: 230px; 
height:100px;
opacity: .8;

background: -moz-linear-gradient(left, #C1B39A, #473F1C); /* gradient del bloque*/
background: -webkit-gradient(linear, left top, right top, from(#C1B39A), to(#473F1C));
background: -o-linear-gradient(left, #C1B39A, #473F1C);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#C1B39A', endColorstr='#473F1C');

-moz-box-shadow:inset 0px 0px 9px #000000; /* sombra del bloque*/
-webkit-box-shadow:inset 0px 0px 9px #000000;
box-shadow:inset 0px 0px 9px #000000;

-moz-transform: skew(-10deg); /* girar el bloque */
-o-transform: skew(-10deg);
-webkit-transform: skew(-10deg);

border-radius:13px; /* redondear esquinas del bloque */
-moz-border-radius:13px;
-webkit-border-radius:13px;
}

#superponer h5 { /* texto*/
  color:#CCC1A7;
  font-family: Georgia;
  text-shadow:1px 1px 1px #2D2500;
  font-size: 40px;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
}

#superponer h5 span { /* letra resaltada */
  color:#2D2500;
  padding:  5px;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #8F8366;
}
</style>