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