Tạo Album hình ảnh đơn giản bằng CSS, Tạo Album hình ảnh trong HTML bằng CSS, tạo bộ sưu tập hình ảnh

Tạo Album hình ảnh đơn giản bằng CSS, Tạo Album hình ảnh trong HTML bằng CSS, tạo bộ sưu tập hình ảnh

Tạo Album hình ảnh đơn giản bằng CSS

Tạo một bộ sưu tập ảnh, thực chất là kết hợp các thuộc tính của CSS như: Position, margin, align, padding, float,.... Nếu đã hiểu rõ về những thuộc tính đó, thì bạn sẽ làm được những cái album ảnh đẹp, dưới đây tôi có hai ví dụ để giúp bạn hình dung ra cách tạo một bộ sưu tập ảnh.

Tạo bộ sưu tập ảnh đơn giản

Dưới đây là một bộ sưu tập ảnh đơn giản chỉ gồm hình và tiêu đề của tấm hình

Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
<!DOCTYPE html>
<html>
<head>
<style>
    div.img {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 200px;
    }	
    div.img:hover {
        border: 1px solid #777;
    }
    div.img img {
        width:100%;
        height: auto;
    }
    div.desc {
        padding: 10px;
        text-align: center;
    }
</style>
</head>
<body>
    <div class="img">
        <a href="h1.jpg" target="_blank">
           <img src="h1.jpg">
        </a>
        <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
    </div>
    <div class="img">
        <a href="h2.jpg" target="_blank">
           <img src="h2.jpg">
        </a>
        <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
    </div>
    <div class="img">
        <a href="h3.jpg" target="_blank">
           <img src="h3.jpg">
        </a>
        <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
    </div>
    <div class="img">
        <a href="h4.jpg" target="_blank">
           <img src="h4.jpg">
        </a>
        <div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
    </div>
</body>
</html>

Tạo bộ sưu tập ảnh nâng cao

Dưới đây là một bộ sưu ảnh hao hao giống facebook, khi dí chuột vào sẽ hiện nút thích, bình luận, và tên tấm ảnh

Đồng ruộng


Thích - Bình luận

Đôi bạn vẹt


Thích - Bình luận

Vườn hóa phong lan


Thích - Bình luận

Rừng thông


Thích - Bình luận

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .box{
            float: left;
            position: relative;
            margin:0px 10px 10px 0px;
        }
        img{
            width:200px;
            height:200px;
            margin:0px;
            padding: 0px;
            border:1px solid black;
        }
        .title{
            position: absolute;
            width: 100%;
            bottom:0px;
            display: none;
        }
        .title h3{
            margin:0px 0px 0px 8px;
            color: white;
        }
        .title hr{
            border:0px;
            border-bottom:1px solid #ddd;
        }
        .title p{
            margin: 0px 0px 13px 8px;
            color:#ddd;
        }
        .box:hover img{
            opacity: 0.9;
        }
        .box:hover .title{
            display: inherit;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="h1.jpg" target="_blank"><img src="h1.jpg"></a>
        <div class="title">
            <h3>Đồng ruộng</h3>
            <hr>
            <p>
                <span class="span1">Thích</span>
                -
                <span class="span2">Bình luận</span>
            </p>
        </div>
    </div>
    <div class="box">
        <a href="h2.jpg" target="_blank"><img src="h2.jpg"></a>
        <div class="title">
            <h3>Đôi bạn vẹt</h3>
            <hr>
            <p>
                <span class="span1">Thích</span>
                -
                <span class="span2">Bình luận</span>
            </p>
        </div>
    </div>
    <div class="box">
        <a href="h3.jpg" target="_blank"><img src="h3.jpg"></a>
        <div class="title">
            <h3>Vườn hóa phong lan</h3>
            <hr>
            <p>
                <span class="span1">Thích</span>
                -
                <span class="span2">Bình luận</span>
            </p>
        </div>
    </div>
    <div class="box">
        <a href="h4.jpg" target="_blank"><img src="h4.jpg"></a>
        <div class="title">
            <h3>Rừng thông</h3>
            <hr>
            <p>
                <span class="span1">Thích</span>
                -
                <span class="span2">Bình luận</span>
            </p>
        </div>
    </div>
</body>
</html>

Tạo Album hình ảnh đơn giản bằng CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi