Sunteți pe pagina 1din 3

//pt marire la trecerea cu mousul peste imagine

<head>
<style type="text/css">
img {
height: 130px;
width: 110px;
}
img:hover {
border: 4px ridge #74B7EB;
height: 150px;
margin-left: -50px;
margin-top: -75px;
position: absolute;
width: 150px;}
</style>
</head>
<body>
<table class="galerie" style="background-color: #1A69AB; " border="1" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td><a href="imagini/2.jpg"><img src="imagini/2.jpg" width="100" height="75" title="Bucegi Babe"
alt="Bucegi Babe" /></a></td>
<td><a href="imagini/3.jpg"><img src="imagini/3.jpg" width="100" height="75" title="Bucegi Valea
Cerbului" alt="Bucegi Valea Cerbului" /></a></td>
<td><a href="imagini/4.jpg"><img src="imagini/4.jpg" width="100" height="75" title="Releul Costila"
alt="Releul Costila" /></a></td>
<td><a href="imagini/5.jpg"><img src="imagini/5.jpg" width="100" height="75" title="Panorama Platou
Bucegi" alt="Panorama Platou Bucegi" /></a></td>
<td><a href="imagini/6.jpg"><img src="imagini/6.jpg" width="100" height="75" title="Pe Platoul Bucegi"
alt="Pe Platoul Bucegi" /></a></td>
</tr>
<tr class="portret">
<td><a href="imagini/01.jpg"><img src="imagini/01.jpg" width="100" height="75" title="Bucegi Babele
Omu" alt="Bucegi Babele Omu" /></a></td>
<td><a href="imagini/02.jpg"><img src="imagini/02.jpg" width="100" height="75" title="Stanca din
Bucegi" alt="Stanca din Bucegi" /></a></td>

<td><a href="imagini/03.jpg"><img src="imagini/03.jpg" width="100" height="75" title="Peisaj din Bucegi"


alt="Peisaj din Bucegi" /></a></td>
<td><a href="imagini/04.jpg"><img src="imagini/04.jpg" width="100" height="75" title="Traseu Bucegi"
alt="Traseu Bucegi" /></a></td>
<td><a href="imagini/05.jpg"><img src="imagini/05.jpg" width="100" height="75" title="Cabana Floare de
Colt" alt="Cabana Floare de Colt" /></a></td>
</tr>
</tbody>
</table>
</body>

<head>
<style type="text/css">
a{
display:inline-block;
outline:none;}
a
img.normal
{width:100px;
padding:3px;
border:dashed 1px #000;
margin:5px;
background:silver;}
a
span.absolute {display:none;}
a:hover
span.absolute{
position:absolute;
top:20%;
width:90%;
display:block;
left:5%;
height:0px;}
a:hover
span.absolute
img{
display:block;
margin:auto;

margin-top:5%;
padding:3px;
border:dashed 1px #000;
background:silver;}
</style>
</head>
<body>
<a href= "imagini/2.jpg" target="blank">
<img class="normal" src="imagini/2.jpg">
<span class="absolute">
<img src="imagini/2.jpg">
</span>
</a>
<a href="imagini/4.jpg" target="blank">
<img class="normal" src="imagini/4.jpg">
<span class="absolute">
<img src="imagini/4.jpg">
</span>
</a>
</body>