Esta es una galería de imagen CSS con títulos, que muestra más grandes las imágenes dinámicamente cuando el mouse pasa sobre ellas. Un título puede ser añadido a la imagen ampliada,estas las puedes modificar a sus gustos,medidas color de fondo del borde y imagenes disfrutenla.
Este va entre las etiquetas .<head><head>
<!-- Codes by tubetrucos.com --> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px 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*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>
Este va en el body donde ustedes quieren que se muestre.
<div class="gallerycontainer"><br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images1.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images1.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/ima.jpg" width="100px" height="66px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/ima.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images6.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images6.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images7.jpg" width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images7.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images4.jpg" width="100px" height="75px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images4.jpg" /><br /> Aquí pueden poner el titulo que quieran</span></a> <a class="thumbnail" href="#thumb"><img src="http://dl.dropbox.com/u/25944020/images8.jpg " width="100px" height="70px" border="0" /><span><img src="http://dl.dropbox.com/u/25944020/images8.jpg " /><br /> Aquí pueden poner el titulo que quieran</span></a> <br /> </div>
Ejemplo:
Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran
Aquí pueden poner el titulo que quieran
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
0 comentarios:
Publicar un comentario