Hola! Tengo una galería en mi página que al posicionar el ratón sobre las miniaturas se ve la imagen en grande, pero yo lo que quiero es que se vea cuando haces click sobre ellas y que se quede fija hasta que no hagas click en otra, y ya para rizar el rizo que cuando abras se vea alguna foto.
Os dejo la página:
http://dipweb.es/dipweb1
Y el código que tengo ahora mismo
<div id="galery">
<a class="thumb" > <img src="images/opiniom.jpg" width="75" height="75" alt="opinio" longdesc="http://dipweb.es" />
<span> <img src="images/opinio.jpg" width="596" height="450" alt="opinio" longdesc="http://dipweb.es" /><br />
Web Librería </span> </a> </div>
CSS:
.galery {
width: auto;
padding: 1em;
text-align: center;
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
}
.galery p {
color: #272d4d;
font-family: "Andale mono", "Trebuchet MS", sans-serif;
font-size: 12px;
line-height: normal;
}
.thumb img {
border: 2px solid #FFB350;
margin: 0 3px 5px 3px;
}
.thumb:hover img {
border: 2px solid #272d4d;
}
.thumb span {
position: absolute;
top: 200px;
left: -1000px;
color: #272d4d;
font-family: "Andale mono", "Trebuchet MS", sans-serif;
font-size: 12px;
visibility: hidden;
}
.thumb:hover span {
visibility: visible;
right: 0;
top: 200px;
left: 0;
width: auto;
bottom: 0;
height: 80%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.thumb span a img {
border: 1px solid #000;
padding: 5px 5px 5px 5px;
background-color: ##272d4d;
}
Gracias