Thumbnail zoom

[Maartenv87]

Ik zit vast met een css scriptje voor het zoomen van thumbnails.
Dit is wat er moet komen. Wanneer iemand over een kleine foto gaat komt er een andere foto tevoorschijn die 4 kleine foto's overlapt.
Ik heb al javascripts geprobeerd maar die verschuiven de tabel mee waardoor de lay out niet meer klopt.
Bedoeling is iets te krijgen zoals op de fotos.

Dit is de code die ik nu heb:
CSS

.thumbnailro{
position: relative;
z-index: 0;
}

.thumbnailro:hover{
background-color: transparent;
z-index: 50;
}

.thumbnailro span{ 
position: absolute;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnailro span img{ 
border-width: 0;
padding: 0px;
}

.thumbnailro:hover span{ 
visibility: visible;
top: 0;
left: 0px; 

}

.thumbnaillo{
position: relative;
z-index: 0;
}

.thumbnaillo:hover{
background-color: transparent;
z-index: 50;
}

.thumbnaillo span{ 
position: absolute;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnaillo span img{ 
border-width: 0;
padding: 0px;
}

.thumbnaillo:hover span{ 
visibility: visible;
top: 0;
left: -146px; 

}

HTML

<div align="center"><a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnaillo" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a><br />

    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
    <a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a></div>

Probleem is dat wanneer er één foto vergroot is je niet meer naar de foto's daaronder kan gaan. Ik weet niet of er een tijdsfunctie is in css bv na 1 sec terug klein maken?
Volgende probleem is dat de grote foto altijd over de 4 kleinere moet passen.
Dus als de kleine foto linksboven is dan moet de grote foto anders komen dan als de kleine foto rechtsonder is.

 

[Maartenv87]

Heb het ondertussen klaar gekregen.

Mijn vraag is nu enkel hoe kan ik de zoomimage weg doen? Door bijvoorbeeld te klikken of na een tijdslimiet? Is dit mogelijk in css?

Website URL: http://85.17.3.183/~gladz0r/tuilt/begin.html

/* 
LINKS BOVEN
LINKS BOVEN
LINKS BOVEN
LINKS BOVEN
*/
.thumbnaillb{
position: relative;
z-index: 0;
}

.thumbnaillb:hover{
background-color: transparent;
z-index: 50;
}

.thumbnaillb span{ 
position: absolute;
padding: 0px;
border: 1px solid brown;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnaillb span img{ 
border-width: 0;
padding: 0px;
}

.thumbnaillb:hover span{ 
visibility:visible;
top: 0px;
left: 0px; 
}

/* 
LINKS ONDER
LINKS ONDER
LINKS ONDER
LINKS ONDER
*/
.thumbnaillo{
position: relative;
z-index: 0;
}

.thumbnaillo:hover{
background-color: transparent;
z-index: 50;
}

.thumbnaillo span{ 
position: absolute;
padding: 0px;
border: 1px solid brown;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnaillo span img{ 
border-width: 0;
padding: 0px;
}

.thumbnaillo:hover span{ 
visibility:visible;
top: -124px;
left: 0px; 


}

/* 
RECHTS ONDER
RECHTS ONDER
RECHTS ONDER
RECHTS ONDER
*/

.thumbnailro{
position: relative;
z-index: 0;
}

.thumbnailro:hover{
background-color: transparent;
z-index: 50;
}

.thumbnailro span{ 
position: absolute;
padding: 0px;
border: 1px solid brown;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnailro span img{ 
border-width: 0;
padding: 0px;
}

.thumbnailro:hover span{ 
visibility:visible;
top: -124px;
left: -124px; 

}

/* 
RECHTS BOVEN
RECHTS BOVEN
RECHTS BOVEN
RECHTS BOVEN
*/
.thumbnailrb{
position: relative;
z-index: 0;
}

.thumbnailrb:hover{
background-color: transparent;
z-index: 50;
}

.thumbnailrb span{ 
position: absolute;
padding: 0px;
border: 1px solid brown;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnailrb span img{ 
border-width: 0;
padding: 0px;
}

.thumbnailrb:hover span{ 
visibility:visible;
top: 0px;
left: -124px; 

}

<body>
<div align="center">
<a class="thumbnaillb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailrb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />
<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />

<a class="thumbnaillb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailrb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>
  
<br />

<a class="thumbnaillo" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailro" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />
<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />

<a class="thumbnaillo" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailro" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>
<br />
<a class="thumbnaillb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailrb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />
<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />

<a class="thumbnaillb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailrb" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>
  
<br />

<a class="thumbnaillo" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailro" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />
<img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" />

<a class="thumbnaillo" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>

<a class="thumbnailro" href="#thumb"><img src="beginpagina/1klein.jpg" width="120px" height="120px" border="0" /><span><img src="beginpagina/1groot.jpg" /></span></a>
</div>

</body>