我正在尝试为卫生组织建立一个网站。我想包括一个手风琴图片幻灯片。这是我到目前为止所拥有的,并且工作正常:
http://www.squaremedia.com.au/demosites/accordion_slider/
我想做的是在每个图像上添加彩色边栏,并带有一些文本,如下图所示:
http://www.squaremedia.com.au/demosites/accordion_slider/slideshow_idea.png
有人知道我该怎么做吗?谢谢。
最佳答案
您可以为每个图像创建一个div
并将其放在li
标记内,然后将以下CSS代码固定在右侧:
div {
height: 100%;
width: 2em !important;
position: absolute;
left: 0;
background-color: blue;
}
查看this fiddle了解更多信息。
片段:
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: 'Montserrat', sans-serif;
}
.accordion {
width: 100%;
overflow: hidden;
max-width: 1920px;
height: 320px;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
/* regular width */
/*width: 11.111%; /* 100% / 9 */
*/ height: 320px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 320px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
transition: all 200ms ease;
background: rgba(0, 0, 0, 0.5);
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: 220px;
left: 20px;
}
.accordion ul li div a p {
top: 220px;
left: 20px;
font-size: 13.5px;
}
/*make images scale as window resizes */
.accordion ul li {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* images */
.accordion ul li:nth-child(1) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/arthritis.jpg");
}
.accordion ul li:nth-child(2) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/cancer.jpg");
}
.accordion ul li:nth-child(3) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/cardiac.jpg");
}
.accordion ul li:nth-child(4) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/diabetes.jpg");
}
.accordion ul li:nth-child(5) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/fall_prevention.jpg");
}
.accordion ul li:nth-child(6) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/physio.jpg");
}
.accordion ul li:nth-child(7) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/pre_natal.jpg");
}
.accordion ul li:nth-child(8) {
background-image: url("http://www.squaremedia.com.au/demosites/accordion_slider/images/weight_loss.jpg");
}
.accordion ul li:nth-child(9) {
background-image: url("images/work_cover.jpg");
}
/* widths for hovering*/
/* width not showing */
.accordion ul:hover li {
width: 5%;
}
/* (100 - 60) / 8 */
/* width showing */
.accordion ul:hover li:hover {
width: 60%;
}
/*darken image when hovering */
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* mobile view */
@media screen and (max-width: 600px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
.sidebar {
height: 100%;
width: 2em !important;
position: absolute;
left: 0;
background-color: blue;
}
.sidebar p {
color: white;
font-size: 16px;
font-weight: bold;
transform: rotate(-90deg) translate(-5%, -75%);
position: absolute;
top: 50%;
left: 50%;
}
<div class="accordion">
<ul>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
<li>
<div class="sidebar">
<p>
Text
</p>
</div>
<div>
<a href="#">
<h2>Title</h2>
<p>Description</p>
</a>
</div>
</li>
</ul>
</div>