بزرگ شدن عکس با رفتن موس بر روی انها

[alihassanabadi]

سلام به همه
در اینجا نحوه بزرگ شدن عکس ها با موس موو شدن بر روی آنها را میبینیم
برای کسانی که زیاد با گالری عکس سرو کار دارن شاید مفید باشه
:css code


<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 dashed 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>


کد اچ تی ام ال:
:html code



<divclass="gallerycontainer"style="text-align: left">
<aclass="thumbnail"href="#thumb">
<imgsrc="media/baby.jpg"width="100px"height="66px"border="0"/>
<span><imgsrc="media/baby.jpg"/>
<br/>زیبای ساده</span>
</a>
<aclass="thumbnail"href="#thumb">
<imgsrc="media/beautiful baby.jpg"width="100px"height="66px"border="0"/>
<span><imgsrc="media/beautiful baby.jpg"/>
<br/>بچه ی خوشگل</span>
</a>
<br/>
<aclass="thumbnail"href="#thumb">
<imgsrc="media/darling baby.jpg"width="100px"height="75px"border="0"/>
<span><imgsrc="media/darling baby.jpg"/>
<br/>بچه ی عزیز</span>
</a>
<aclass="thumbnail"href="#thumb">
<imgsrc="media/fasion baby.jpg"width="100px"height="70px"border="0"/>
<span><imgsrc="media/fasion baby.jpg"/>
<br/>فشن</span>
</a>
<br/>
<aclass="thumbnail"href="#thumb">Dynamic Drive<span><imgsrc="media/baby.jpg"/>
<br/>Dynamic Drive</span>&nbsp;</a>
<br/>
<br/>
<strong>تقدیم به همه دوستان برنامه نویس</strong>

</div>

________________________________________
سعادت دیگران بخش مهمی از خوشبختی ماست.

[emad_67]

در این مورد این رو هم می تونید ببینید:
http://www.irpcn.com/css/photo-gallery.html