<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>
@import "compass/css3";
@mixin transition($transition...) {
    -moz-transition:    $transition;
    -ms-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

$bg1: "https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg";
$bg2: "https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg";
$bg3: "https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg";
$bg4: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg";

body { 
  background: #444;
  display: flex;
  flex-direction: column;
}

.credits {
  text-align: right;
  margin-top: 15px;
  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;
  
  li {
    float: left; 
    width: 16.666%; 
    height: 600px;
    opacity: 0.4;
    @include transition(all .5s ease-in-out);
    
    &:hover,
    &:first-child ~ li:last-child {
      width: 50%;
      opacity: 1;
      @include transition(all .5s ease-in-out);
    }
    
    &:hover ~ li:last-child {
      width: 16.666%;
      opacity: 0.4;
    }
    
    &:nth-child(1) {
      background: url($bg1) top center no-repeat;
    }
    &:nth-child(2) {
      background: url($bg2) top right no-repeat;
    }
    &:nth-child(3) {
      background: url($bg3) top center no-repeat;
    }
    &:nth-child(4) {
      background: url($bg4) top center no-repeat;
    }
  }
  
} // End ul

/** Add cool filter efects **/
ul li {
  &::before {
    content: "";
    display:block;
    width:0;
    height:100%;
    @include transition(all .5s ease-in-out);
  }

  &:nth-child(1)::before { background-color: rgba(255, 87, 34, .2)}
  &:nth-child(2)::before { background-color: rgba(76, 175, 80, .25)}
  &:nth-child(3)::before { background-color: rgba(33, 150, 243, .25)}
  &:nth-child(4)::before { background-color: rgba(156, 39, 176, .2)}
}

input:checked ~ ul li::before { 
  width: 100%;
  @include transition(all .5s ease-in-out);
}

input[type="checkbox"] {
  width:555px;
  margin: 15px;
  font-family: "Segoe UI", "Ubuntu", monospace;
  color: white;
  &::before { 
    content: "Pure CSS Accordion";
    font-size: 1.5em;
    position: relative;
    top:-10px;
  }
  &::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; }
}
View Compiled
// Look Ma! no JS!!!
// Pure CSS Accordion with images and color filters

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.