.:: GeneralPHPMySQLAJAXCSSJavaScriptHTML.htaccessLesson ::.

Thêm bài viết mới

Thêm ý kiến

Emotion|Show / Hide

Thumbnail với CSS

Đây là đoạn CSS đơn giản để làm gallery dạng thumbnail, cái này rất thuận tiện cho việc tạo gallery trong phần admin hoặc trong các icon của mẫu tin, Demo:
#Image Full(mouseover lên ngôi nhà)

<style>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.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 on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
<a class="thumbnail" href="#phpbasic.com"><img src="http://phpbasic.com/phpbasic_html/Default/images/home.png" width="45" height="45" /><span><img src="http://phpbasic.com/phpbasic_html/Default/images/logo.gif"><BR>
#Image Full</span></a>

Tác giả:TG
Webmaster
http://phpbasic.com

Show / Hide

Ý kiến(2)

Thêm ý kiến

Add phpBasic to your browser's search box

Cùng thể lọai » CSS - Xin hướng dẫn cách thức làm layout bằng div và css » Khắc phục lỗi double margin trong css với ie » Cơ bản về tính toán box model trong css !!! » Basic CSS layout » Floating image with no text wrap » Tạo góc cho khung (bằng Image) » Menu CSS standar ( không dùng CSS hack) » Menu CSS 2 » Menu CSS 3 » Menu CSS 4 » Menu CSS 5 » CSS image » thắc mắc về thẻ DIV( z-index của div với Flash) » Thumbnail với CSS

Tableless template Framework PHP functions
jQuery
Các bài viết đã xem • Xin bộ editor • Chương 12: CSS Background • Fix URL trong Ajax • chương 4: IDs • choncon • Phần 1: cơ bản • CSS - Xin hướng dẫn cách thức làm layout bằng div và css

Submit link A-Z web seo Javascript search highlight Fonts Download 1 Download Fonts 2 Trung tâm đào tạo HLV võ thuật Việt Nam Invisible scanner! Cộng đồng JS Việt Tuyển dụng CNTT Ken Phan\'s blog Việc làm tại Sài Gòn Lorem Ipusum Thông tin kinh tế » Thiết kế Web-Tuyển Dụng » Mẫu Brochure ấn tượng ! ::. Phần mềm thiết kế Web ::.Thủ thuật Web, DV.Web JQuery Viet Nam Group CSS & HTML Vinanap - Vietnamse National Adapter Person