Gallery HTML &CSS part 2

Photo Gallery & DW css tricks
الجزء السهل خلص و هنخوش و نعرف التكنيك الي ورا سي اس اس و نحاول انا نستفيد من الخصائص الكتيراالي هوا مدهلنا و يبقي احنا كدا خلصنا مع دريم ويفر او جزء منه صغير


*{
margin:0;
padding:0;
}

#container{
width:300px;
height:250px;
margin:50px auto;
}

.warp{
position:relative;
}

.small img{
border:1px solid #fff;
margin:0 5px 5px 0;
float:left;
}

.small:hover{
background-color:transparent;
}

.small:hover img{
border:1px solid #39F;
}

.small span{
position:absolute;
background-color:#CCC;
padding:5px;
left:-1000px;
border:1px dashed #666;
visibility:hidden;
color:#000;
text-decoration:none;
}

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

.small:hover span{
visibility:visible;
top:0;
left:220px;
z-index:50;
}

  • HTML-CSS PSD TO HTML&CSS
  • بناء صفحت أتش تي أم أل