Untitled

<!DOCTYPE html>
<html>
<head>
<title>Awkward Showcase - Demo #2</title>
<link rel="stylesheet" href="assets/css/style.css" media="screen"/>
</head>
<body>
<div class="service">
<div class="slider">
    <input class="slider__checker" type="radio" name="slides" id="#checker1" checked>
    <input class="slider__checker" type="radio" name="slides" id="#checker2">
    <input class="slider__checker" type="radio" name="slides" id="#checker3">

    <div class="slider__items">
        <div class="slider__item">
        <img src="http://www.call4.ru/wp-content/uploads/2013/12/porsche_911_gt3-1920x1080.jpg" alt="..." width="large">
        <div id="head">
        16 bit
        <div class="help">
            <b>Подсказка:</b>
            <p>Это голова</p>
        </div>
        </div>
        <div id="hand">
        32 bit
        <div class="help">
            <b>Подсказка:</b>
            <p>Это рука</p>
            <a href="http://google.com">Заказать</a>
        </div>
        </div>
        <div id="foot">
        64 bit
        <div class="help">
            <b>Подсказка:</b>
            <p>Это рука</p>
            <a href="http://google.com">Заказать</a>
        </div>
        </div>
       </div>
        <div class="slider__item">
          <img src="http://autospynews.net/wp-content/uploads/2015/07/257833bbf5f552057486de1c87996eee_large.jpeg" alt="..." width="large">
        </div>
        <div class="slider__item">
          <img src="http://s1.cdn.autoevolution.com/images/testdrive/gallery/2014-porsche-911-turbo-s-review-2014_55.jpg" alt="..." width="large">
        </div>
    </div>

    <div class="slider__labels">
      <label class="slider__label" for="#checker1">Синий</label>
      <label class="slider__label" for="#checker2">Зеленый</label>
      <label class="slider__label" for="#checker3">Метилик</label>
    </div>
</div>
</div>
</body>
</html>

.service .slider__checker {
  position: absolute;
  visibility: hidden;
}
.service .slider__label {
  cursor: pointer;
  display: inline-block;
  margin-right: 20px;
  padding: 5px 10px;
  border: 1px solid white;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
.service .slider__item {
  display: none;
  width: 100%;
  margin-bottom: 10px;
}
#hand {
    position: absolute;
    top: 33%;
    right: 67%;
    width: 80px;
    height: 90px;
    border: 1px solid #aaa;
    background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
#head {
    position: absolute;
    top: 33%;
    right: 10%;
    width: 80px;
    height: 90px;
    border: 1px solid #aaa;
    background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
#foot {
    position: absolute;
    top: 33%;
    right: 40%;
    width: 80px;
    height: 90px;
    border: 1px solid #aaa;
    background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
.service .help {
    display: none;
    position: absolute;
    top: 20px;
    left: -20px;
    padding: 10px;
    width: auto;
    height: auto;
    background: #222;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
}
div:hover > .help {
    display: block;
}
.service .slider__checker:nth-child(1):checked ~ .slider__items > .slider__item:nth-child(1) {
  display: block;
}
.service .slider__checker:nth-child(1):checked ~ .slider__labels > .slider__label:nth-child(1) {
  background: white;
}
.service .slider__checker:nth-child(2):checked ~ .slider__items > .slider__item:nth-child(2) {
  display: block;
}
.service .slider__checker:nth-child(2):checked ~ .slider__labels > .slider__label:nth-child(2) {
  background: white;
}
.slider__checker:nth-child(3):checked ~ .slider__items > .slider__item:nth-child(3) {
  display: block;
}
.slider__checker:nth-child(3):checked ~ .slider__labels > .slider__label:nth-child(3) {
  background: white;
}