Aqui puedes añadir una pequeña referencia de la foto
Hay que reconocer que con css se pueden llegar a lograr cantidad de cosas. Y cada una de ellas útiles para algo que deseemos hacer en un determinado momento. En este caso veremos como con css se logra mostrar una imagen miniatura (thumbnails) pero que al pasar el mouse sobre ella nos mostrara el tamaño original de la imagen, logrando con esto, el efecto popup. Si bien el efecto puede ser sencillo, a mi me parece bastante agradable, y muchas galería de imágenes la suelen usar para mostar sus porfolios, catálogos, etc. Para ver de que hablamos, solo pasa el Mouse sobre la foto el post, y veras como muestra el tamaño original, con una pequeña descripción de la foto.
Lo primero que hacemos para lograr esto es introducir este código en nuestra hoja de estilo.
CSS:
-
.thumbnail{
-
position: relative;
-
z-index: 0;
-
}.thumbnail:hover{
-
background-color: transparent;
-
z-index: 50;
-
}.thumbnail span{ /*CSS for enlarged image*/
-
position: absolute;
-
background-color: lightyellow;
-
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: 60px; /*position where enlarged image should offset horizontally */
-
-
}
Cuando deseamos darle este efecto a las imágenes en nuestro post, llamamos a la clase thumbnail, para ello antes siempre es bueno seleccionar en nuestro menú de herramientas donde escribimos los post, la opción CODE, así podremos pegar nuestro código.
Y ahora para darle el efecto a las imagenes llamamos a la clase thumbnail de esta forma:
HTML:
200px" height="150px = estos son los valores que tendrá el tamaño de tu imagen miniatura, si deseas que la imagen miniatura sea mas grande, cambiando los valores lo modificas a tu gusto.
También veras en el código una parte donde podrás introducir una pequeña descripción de la imagen, para que cuando pasen el Mouse sobre la imagen, y se muestre el tamaño original, verán debajo de ella esa descripción.
www.elserver.com
Hosting Web 2.0 - La Empresa que sobrepasa todas las expectativas...
www.zidalgo.com
Premium wordpress themes for your blog! - Brad Mahaffey
www.Tilidom.com
Almacenar toda tu informacion, incluyendo fotos, videos y musica.
Aikora
18 - 05 - 2007
Permalink
Pasadon, este efecto en imagen es exelente, me recuerda un poco al lightbox, si no mal recuerdo, muchas gracias el código.
Nikko
18 - 05 - 2007
Permalink
si tal cual es similar...aunq el otro es un poquito mas bello...quiero hacer algo sobre Slimbox que es una replica de lightbox pero mas liviano..vere si en estos dias lo pongo en algun post ! salutes ^_^
juanguis
18 - 05 - 2007
Permalink
Groso Nikko, hace bastante tiempo que veo esto en muchos sitios pero nunca me puse a buscar como se hace.
Gracias che.
Nikko
18 - 05 - 2007
Permalink
JUANGUIS: ahora hazlo no seas vago ^_^ ja Salutes !!!!!!
Angel
18 - 05 - 2007
Permalink
Como puede cambiarse la posición de la imagen, ya que la deseo arriba del thumbnail y no a lado
Pop-up en imágenes mediante CSS « Blognode
18 - 05 - 2007
Permalink
[...] Pop-up, otra técnica sencilla para lograr el efecto Pop-up en imágenes. Seguramente recordaran el post donde explicamos una. La idea es muy sencilla, dar el efecto Pop-up que habitualmente podemos llegar a [...]
Otro efecto pop-up con CSS
18 - 05 - 2007
Permalink
[...] una técnica sencilla que lograr el efecto pop-up en imágenes. La encontramos en XYBERNETICOS donde comenta que con CSS se pueden lograr cantidad de cosas, y útiles para algo que deseemos [...]
Guillermo Silva
18 - 05 - 2007
Permalink
Como puedo hacer para ponerle un marco negro al la imagen pequenia
cristian vallejos
18 - 05 - 2007
Permalink
hola a todos, solo queria dar un pequeño aporte para aquel que lo necesite
.thumbnail1:hover{
background-color: transparent;
z-index: 50;
padding-top: 50px;
padding-top: 50px; si esto se lo agregas en esa linea de codigo; segun el ejemplo que se expone aqui, este podra subir o bajar la imagen de posicion, donde 50 puede variar, tanto como 100, o -100; segun sea el caso, da lo mismo el numero, tu decides Angel said, me imagino que eso preguntabas
Diego Lobo
18 - 05 - 2007
Permalink
Man muchas gracias es la solucion que estaba buscando muchas gracias por el aporte, me gustaria que alguien me pudiera enseñar como utilizar el lightbox, o algo parecido he mirado varios tutos pero nada !!!...y de antemano gracias
Suerte y visiten mi web!!
y no olviden dejar un mensaje
sebastian Cataneda morales
18 - 05 - 2007
Permalink
me gusta el efecto, esta muy atractivo, alguien podria decirme como hacerle para aplicarle efecto lightbox?
En realidad lo que necesito es un lightbox automatico, es decir, tener una imagen, y al pasar el mouse se despliegue el ligthbox.
todos los lightbox que he encontrado, se activan al darle click a una imagen o un texto.
si alguien puede enviarme algo por favor...
Victor
18 - 05 - 2007
Permalink
Quisiera saber si es posible tener enlaces en lugar de las fotos y que al pasar el mouse sobre ellos aprezca una especie de y en el se muestre la pagina a la que hace referencia el enlace sobre el que está el mouse y que la retira el mouse se cierre tambien la pagina del enlace...y asi para varios enlaces. Muchas gracias de antemano por alguna respuesta!!!