Bài viết này hướng dẫn cách làm Hình xếp (Accordion) chỉ với CSS3. Bạn có thể áp dụng bài viết này cho phần hiển thị hình ảnh sáng tạo hơn.
HTML
Đầu tiên, bạn có thể tải hình ảnh tại đây, sao chép vào thư mục img
. Nếu bạn đã tải về mã nguồn ở trên, thì không cần tải thêm hình.
<div class="ia-container">
<figure> <img src="img/1.jpg" alt="image01">
<input type="radio" name="radio-set" checked="checked">
<figcaption><span>True Colors</span></figcaption>
<figure> <img src="img/2.jpg" alt="image02">
<input type="radio" name="radio-set">
<figcaption><span>Honest Light</span></figcaption>
<figure> <img src="img/3.jpg" alt="image03">
<input type="radio" name="radio-set">
<figcaption><span>Silent Serenity</span></figcaption>
<figure> <img src="img/4.jpg" alt="image04">
<input type="radio" name="radio-set">
<figcaption><span>Warm Welcome</span></figcaption>
<figure> <img src="img/5.jpg" alt="image05">
<input type="radio" name="radio-set">
<figcaption><span>Sensible Magic</span></figcaption>
<figure> <img src="img/6.jpg" alt="image06">
<input type="radio" name="radio-set">
<figcaption><span>Lovely Midnight</span></figcaption>
<figure> <img src="img/7.jpg" alt="image07">
<input type="radio" name="radio-set">
<figcaption><span>Illuminated Darkness</span></figcaption>
<figure> <img src="img/8.jpg" alt="image08">
<input id="ia-selector-last" type="radio" name="radio-set">
<figcaption><span>Happy Child</span></figcaption>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</div>
CSS
Đầu tiên là class .ia-container
.
.ia-container {
width: 685px;
margin: 60px auto 0;
overflow: hidden;
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
border: 7px solid rgba(255,255,255,0.6);
}
Với chiều rộng (width
) được tính bằng công thức sau.
((Số lượng hình ảnh - 1) * 50px) + 335px
Ví dụ: ((8 – 1) * 50px) + 335px = 350px + 335px = 685px.
CSS chính như sau.
ia-container figure {
position: absolute;
top: 0;
left: 50px;
width: 335px;
margin: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ia-container > figure {
position: relative;
left: 0 !important;
}
.ia-container img {
display: block;
width: 100%;
}
.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ia-container input:checked {
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 335px;
}
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption {
background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input {
z-index: 1;
}
Tiếp theo là một số CSS cho Responsive.
@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}
.ia-container figure {
left: 40px;
width: 260px;
}
.ia-container input {
width: 40px;
}
.ia-container input:checked ~ figure {
left: 260px;
}
.ia-container figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}
.ia-container figure {
left: 20px;
width: 180px;
}
.ia-container input {
width: 20px;
}
.ia-container input:checked ~ figure {
left: 180px;
}
.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}
Chúc các bạn thành công!
Không có bình luận.