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!