Wrapping an image in a label-for tag

Question

I have created a content slider via CSS and HTML. The content slider works properly, but what I am trying to do is wrap an img in a "label-for" tag. Is this even possible? is there another solution. I just want the ability to click on the img and and go to a particular slide.

Also, I know it's laid out weird. It's written inline just as a little short code for a wordpress site.

   <div class="wood-container">
  <label for="slide-1-trigger">
    <img src="http://104.236.119.181/Jake/wp-content/uploads/2016/06/Warm-Hearts-duo-tones-Hue-Img.png">
  </label>

</div>



<div class="html">
  <div class="body">
    <div class="wrap">
      <header>
        <label for="slide-1-trigger">Select</label>
        <label for="slide-2-trigger">Premium</label>
        <label for="slide-3-trigger">Decor</label>
        <label for="slide-4-trigger">Style</label>
        <label for="slide-5-trigger">Tradition</label>
      </header>

      <input id="slide-1-trigger" type="radio" name="slides" checked>
      <section class="slide slide-one">
        <h1>Select</h1>
        <h3 style="color: white;"> This selection of quality highlighted by the uniformity in color and shading . Still, it is showing details of character that demonstrate the natural and unique characteristics of the soil. The slats contain few knots of 12 mm maximum. They may contain small cracks and holes knots, always reintegrated toned putty.</h3>
      </section>
      <input id="slide-2-trigger" type="radio" name="slides">
      <section class="slide slide-two">
        <h1>Premium</h1>

        <h3 style="color: white;"> Large woods always have a strong personality. The details of character are the nodes, veins and existing shades in the Premium selection are less pronounced. The knot density is low , reaching these a diameter up to 25mm . They may contain small cracks and holes knots, always reintegrated toned putty. It contains veins, longitudinal shadows and occasionally sapwood fragments that provide natural character and beauty to the wood.</h3>

      </section>
      <input id="slide-3-trigger" type="radio" name="slides">
      <section class="slide slide-three">
        <h1>Decor</h1>

        <h3> This selection is characterized by a greater variability tone and the presence of nodes that can reach 25 mm in diameter. It contains veins and longitudinal accused shadows that bring natural character and beauty to wood , which especially stand out in the heat - treated presentations. </h3>

      </section>
      <input id="slide-4-trigger" type="radio" name="slides">
      <section class="slide slide-four">
        <h1>Style</h1>

        <h3> Characterized by its hardiness, this selection offers shows accentuated woody patterns, with sinuous veining and abundance of knots that can reach 6 cm  in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>

      </section>
      <input id="slide-5-trigger" type="radio" name="slides">
      <section class="slide slide-five">
        <h1>Tradition</h1>

        <h3>Characterized by its hardiness, this selection offers shows accentuated woody patterns , with sinuous veining and abundance of knots that can reach 6 cm  in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>

      </section>

    </div>
  </div>
</div>

CSS:

<style> @import url(http://fonts.googleapis.com/css?family=lato);
html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;
}

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

h1 {
  color: #fff;
  font-family: "lato", cursive;
  font-size: 2em;
  font-size: 6vw;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #333;
}

h3 {
  color: white;
  font-family: "lato";
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin: 20px;
}

@media (min-width: 67.1875em) {
  h1 {
    font-size: 4em;
  }
}

.html,
body {
  height: 100%;
  width: auto;
  margin: 20px;
  padding: 20px;
}

.wood-container {
  width: 250px;
  height: auto;
  float: left;
  margin 20px;
}

.wood-container img {
  max-width: 100%;
}

.wrap {
  height: 430px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #120103;
  color: #fff;
  text-align: center;
}

header {
  background: #3E474F;
  box-shadow: 0 .5em 1em #111;
  position: relative;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

header label {
  color: #788188;
  cursor: pointer;
  display: inline-block;
  line-height: 4.25em;
  font-size: .75em;
  font-weight: bold;
  padding: 0 1em;
}

header label:hover {
  background: #2e353b;
}

.slide {
  height: 430px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-color: #120103;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transition: left 0s .75s;
  transition: left 0s .75s;
}

.slide h1 {
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: opacity .5s, -webkit-transform .5s .5s;
  transition: opacity .5s, -webkit-transform .5s .5s;
  transition: transform .5s .5s, opacity .5s;
  transition: transform .5s .5s, opacity .5s, -webkit-transform .5s .5s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  -webkit-transition: left .65s ease-out;
  transition: left .65s ease-out;
}

[id^="slide"]:checked + .slide h1 {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all .5s .5s;
  transition: all .5s .5s;
}

</style>

A link to the JSFiddle. https://jsfiddle.net/deathbydiabetes/939yu48q/2/