* {
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%;
}
