Esta es una galería de imagen al pasar el mouse por encíma de ese texto se mostrara una imagen,Un título puede ser añadido a la imagen ampliada,estas las pueden 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"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /></span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /></span></a> </div>
Con este es lo mismo lo uníco que este tiene para mostrar un titulo o informacion hacerca de la imagen en la parte de abajo de la imagen van a usar el mismo codígo para el head que les brindo anteriormente ,este va en el body donde ustedes quieren que se muestre.
<div class="gallerycontainer"> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images11.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/images9.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src=" http://dl.dropbox.com/u/25944020/images.jpg" /><br />Aquí ponen el titulo que quieran</span></a> <br /> <a class="thumbnail" href="#thumb">Aquí ponen el titulo<span><img src="http://dl.dropbox.com/u/25944020/jesus.jpg" /><br />Aquí ponen el titulo que quieran</span></a> </div>
Ejemplo:
Ejemplo:
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
Aquí va el titulo
Aquí ponen el titulo que quieran
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
0 comentarios:
Publicar un comentario