Cacher is the code snippet organizer for pro developers

*, *:before, *:after {
    box-sizing: border-box;
}

/* variables*/
/* images to show */
$images: pool strand strand-2 hafen;
$image-ext: '.jpg';
/* $image-path: '../images/'; */
$image-path: 'http://www.css-toolbox.de/codepen/';

/* image size */
$image-height: 450px;
$image-width: 800px;

/* border image-box */
$border-style: 5px solid #26269E;
$border-bottom-width: 10px;
$box-height: $image-height + $border-bottom-width;

/* background-color label
$label-bg: rgba(255,255,255,0.5);
$label-bg-hover: rgba(255,255,255,1);

/* rules */
.image-box {
  border: $border-style;
  border-bottom-width: $border-bottom-width;
  height: $box-height;
  margin: 150px;
  position: relative;
  overflow: hidden;
  width: $image-width;

  .label {
    background: $label-bg;
    cursor: pointer;
    color: rgba(0,0,0,1);
    display: block;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 0;
    -webkit-user-select: none;
    width: 100px;
    z-index: 10;

    &:hover { background: $label-bg-hover; }

    &-1 { left: 0; }

    &-2 { left: 110px; }

    &-3 { left: 220px; }

    &-4 { left: 330px; }
  }

  input { display: none; }

  .image {
    height: $image-height;
    width: $image-width;
    opacity: 0;
    position: absolute;
    transition: all 1s;
  }

  .image-box__images {
    z-index: 5;

    div {
      background: transparent 0 0 no-repeat;
      position: absolute;
    }

    div {
      @for $i from 1 through length($images) {
        &:nth-child(#{$i}) {
          $image-each: nth($images, $i);
          background-image: url(#{$image-path}#{$image-each}#{$image-ext});

        }
      }
    }

    /* each behaviour */
    div:nth-child(1) {
      left: 90%;
      transform: scale(0);
    }
    div:nth-child(2) {
      left: -70%;
      top: 0;
      transform: scale(0) rotate(40deg);
    }
    div:nth-child(3) {
      transform: scale(0);
    }
    div:nth-child(4) {
      transform: scale(0) rotate(-70deg);
    }

  }


  /* checked states */
  @for $i from 1 through length($images) {
    .radio-img-#{$i}:checked ~ .label-#{$i} {
      background: $label-bg-hover;
    }
  }

  @for $i from 1 through length($images) {
    .radio-img-#{$i}:checked ~ div div:nth-child(#{$i}) {
      left: 0;
      opacity: 1;
      top: 0;
      transition: all 1.5s;
      transform: scale(1);

      &:after {
        background: rgba(38,38,158,0.5);
        content: attr(data-desc);
        color: #fff;
        display: block;
        font-size: 1.5em;
        bottom: 0;
        padding: 10px;
        position: absolute;
        width: 100%;
        z-index: 15;
      }
    }
  }

  .radio-img-2:checked ~ div div:nth-child(2) {
    transform: scale(1) rotate(0);
  }

  .radio-img-4:checked ~ div div:nth-child(4) {
    transform: scale(1) rotate(0);
  }
}

<div class="image-box">

  <input type="radio" id="radio-img-1" class="radio-img-1" name="image-box" checked>
  <label for="radio-img-1" class="label label-1">pool</label>

  <input type="radio" id="radio-img-2" class="radio-img-2" name="image-box">
  <label for="radio-img-2" class="label label-2">beach 1</label>

  <input type="radio" id="radio-img-3" class="radio-img-3" name="image-box">
  <label for="radio-img-3" class="label label-3">beach 2</label>

  <input type="radio" id="radio-img-4" class="radio-img-4" name="image-box">
  <label for="radio-img-4" class="label label-4">harbour</label>

  <div class="image-box__images">

    <div class="image image-1" data-desc="Mallorca: Pool in El Arenal"></div>
    <div class="image image-2" data-desc="Mallorca: Beach El Arenal"></div>
    <div class="image image-3" data-desc="Mallorca: Beach Cala Ratjada (Cala Gat)"></div>
    <div class="image image-4" data-desc="Mallorca: Hafen Cala Ratjada"></div>

  </div>

</div>