JOSCCAT: Ampliar imagen con texto

Nos vamos a la playa...!!!
Y si nos tomamos un English Cobbler

Ingredientes:
2/3 Ron Milenario
1/3 té
1 cucharadita de azúcar
1 cucharadita de zumo de limón
Se mezclan todos los ingredientes en el vaso mezclador con hielo en cubitos.
Se vierte en old fashioned o en copas de vino con más hielo en cubitos,
adornando con fruta del tiempo.Se sirve con paja y una cucharadita.
Buen provecho...Josscat :-)

Aquí os traigo este efecto para ampliar imágenes con texto... muy bonito, cuando seleccionas la imagen diminuta se amplia e igual con el texto, sí seleccionas el texto enlazado sale una imagen con texto, en código css sirve igual para la foto diminuta como para el texto enlazado para ampliar imagen+texto o ambas cosas a la vez... aquí os dejo los códigos:

Visto en dynamicdrive

Código CSS: pegar debajo del <head>

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 80px; /*position where enlarged image should offset horizontally */
}
</style>

Código html foto miniatura : Pegar en crear entrada o <body>

<a class="thumbnail" href="#thumb">
<img src="aquí la imagen url" width="100px" height="66px" border="0" /><span><img src="aquí la misma imagen url" />
Aquí el texto que quieras</span></a>

Código html texto abrir imagen: Pegar en crear entrada o <body>

<a class="thumbnail" href="#thumb"><font > aquí el texto para abrir imagen>/font> <span><img src="aquí la imagen url" />aquí el texto que quieras
</span></a>

15 marzo 2007

Ampliar imagen con texto

No hay comentarios:

CATEGORIAS

NUBES EN AZUL

ENLACES

BLOGS AMIG@S

ENCUESTA