[Hướng dẫn] Làm đẹp mô tả của ảnh với css

  • blogger
    Code:
      <div class="main">
        <img src="http://i.imgur.com/zfLhMhu.png" id="logo">
      <div class="content"> <h3>Text</h3></div>

    Code:
    .main {
      position: relative;
      display: block;
      height: 380px;
      width: 1000px;
      border: 1px solid #ccc;
      margin: 10px auto;
      background-size: cover;
    }

    .content {
        line-height: 69px;
        background: rgba(255, 235, 59, 0.69);
        display: block;
        position: absolute;
        bottom: 0;
        padding: 0 30px;
    }

    .content:after {
        content: '';
        width: 0;
        height: 0;
        border-right: 55px solid transparent;
        border-bottom: 69px solid rgba(255, 235, 59, 0.69);
        position: absolute;
        right: -55px;
        top: 0;
    }

    h3 {
        margin: 0;
    }
     

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết