Experimental 3

by lasha

HTML

<div class="container">
  <input type="radio" name="galleryItem" id="galleryItem1">
  <img src="https://www.placecage.com/200/280">
  <label for="galleryItem1">image </label>
  <input type="radio" name="galleryItem" id="galleryItem2">
  <img src="https://www.placecage.com/200/240">
  <label for="galleryItem2">image </label>
  <input type="radio" name="galleryItem" id="galleryItem3" checked>
  <img src="https://www.placecage.com/220/270">
  <label for="galleryItem3">image </label>
  <input type="radio" name="galleryItem" id="galleryItem4">
  <img src="https://www.placecage.com/240/247">
  <label for="galleryItem4">image </label>
  <input type="radio" name="galleryItem" id="galleryItem5">
  <img src="https://www.placecage.com/200/200">
  <label for="galleryItem5">image </label>
  <!-- <input type="radio" name="galleryItem" id="galleryItem1">
  <img src="https://www.placecage.com/200/200">
  <input type="radio" name="galleryItem" id="galleryItem2">
  <img src="https://www.placecage.com/200/200">
  <input type="radio" name="galleryItem" id="galleryItem3" checked>
  <img src="https://www.placecage.com/200/200">
  <input type="radio" name="galleryItem" id="galleryItem4">
  <img src="https://www.placecage.com/200/200">
  <input type="radio" name="galleryItem" id="galleryItem5">
  <img src="https://www.placecage.com/200/200"> -->
  <!-- <div class="labelContainer">
    <label for="galleryItem1">click</label>
    <label for="galleryItem2">click</label>
    <label for="galleryItem3">click</label>
    <label for="galleryItem4">click</label>
    <label for="galleryItem5">click</label>
  </div> -->
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body {
  margin: 0;
  background-color: #6d695c;
  background-image:
  repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
  linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 70px 120px;
  font-family: 'Roboto Condensed', sans-serif;
}
.container {
  position: absolute;
  width: 500px;
  height: 320px;
  background-color: rgba(255,255,255,0.3);
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  counter-reset: my-badass-counter;
  overflow: hidden;
  
  label {
    position: absolute;
    left: 0;
    width: 70px;
    height: 23px;
    line-height: 23px;
    background-color: #fff;
    text-align: center;
    &:after {
      content: counter(my-badass-counter);
    }
  }
  
  input + img {
    position: absolute;
    top: 20px;
    transition: all 0.2s ease-in;
  }
  input {
    clip: rect(0, 0, 0, 0);
    /* float: left; */
    transition: all 0.2s ease-in;
    position: absolute;
    left: 0;
    + img {
      left: -50%;
    }
    &:before {
      content: counter(my-badass-counter);
      counter-increment: my-badass-counter;
    }
    &:checked {
      /* position: absolute; */
      /* float: none; */
      left: 50%;
      + img + input {
        z-index: 1;
      }
      + img + label {
        z-index: 1;
        left: 50%; // when label is active, center it
        visibility: hidden;
        opacity: 0;
        + input + img + label {
          /* color: #fff; */
          z-index: 10;
        }
      }
      + img {
          left: 50%;
          transform: translateX(-50%);
        }
    ...