<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure CSS Accordion</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrap">
<input type="checkbox" checked>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="credits">
<a target="_blank" href="https://codepen.io/emoreno911">@emoreno911</a>
<div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
body {
background: #444;
display: flex;
flex-direction: column;
}
.credits {
text-align: right;
margin-top: 15px;
}
.credits a {
color: #222;
background-color: #f8dc3d;
font-family: "Segoe UI", "Ubuntu", monospace;
font-weight: 500;
text-decoration: none;
padding: 2px 10px;
border-radius: 4px;
}
ul {
list-style: none;
max-width: 1200px;
margin: 0 auto;
}
ul li {
float: left;
width: 16.666%;
height: 600px;
opacity: 0.4;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul li:hover, ul li:first-child ~ li:last-child {
width: 50%;
opacity: 1;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul li:hover ~ li:last-child {
width: 16.666%;
opacity: 0.4;
}
ul li:nth-child(1) {
background: url("https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg") top center no-repeat;
}
ul li:nth-child(2) {
background: url("https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg") top right no-repeat;
}
ul li:nth-child(3) {
background: url("https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg") top center no-repeat;
}
ul li:nth-child(4) {
background: url("https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg") top center no-repeat;
}
/** Add cool filter efects **/
ul li::before {
content: "";
display: block;
width: 0;
height: 100%;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
ul li:nth-child(1)::before {
background-color: rgba(255, 87, 34, 0.2);
}
ul li:nth-child(2)::before {
background-color: rgba(76, 175, 80, 0.25);
}
ul li:nth-child(3)::before {
background-color: rgba(33, 150, 243, 0.25);
}
ul li:nth-child(4)::before {
background-color: rgba(156, 39, 176, 0.2);
}
input:checked ~ ul li::before {
width: 100%;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
input[type="checkbox"] {
width: 555px;
margin: 15px;
font-family: "Segoe UI", "Ubuntu", monospace;
color: white;
}
input[type="checkbox"]::before {
content: "Pure CSS Accordion";
font-size: 1.5em;
position: relative;
top: -10px;
}
input[type="checkbox"]::after {
content: "Filters Enabled";
color: #caa;
position: relative;
top: -10px;
left: 5px;
}
/** Layout fixes **/
.credits a {
margin-right: calc((100% - 1230px)/2);
}
input[type="checkbox"] {
margin-left: calc((100% - 1160px)/2);
}
@media (max-width: 1240px) {
.credits a {
margin-right: 0px;
}
input[type="checkbox"] {
margin-left: 35px;
}
}
// Look Ma! no JS!!!
// Pure CSS Accordion with images and color filters