Change CSS body settings by hovering on a trigger

Question

I have the following code, and I attempted to wrap the image in a span that is the trigger ID. I can make it work if the trigger is an div object with an explicit height and width. Is there any way to make the image that trigger object?

body {
  background: black;
  color: white;
}

#triggerModel {
  z-index: 2;
}

#triggerModel:hover ~ body {
  background-image: url('http://placehold.it/1600x900');
  background-repeat: no-repeat;
  background-position: fixed;
}

#wrapper {
  width: 480px;
  margin: auto;
  margin-top: 60vh;

}

.line1 {
  letter-spacing: 42px;
  font-size: 35px;
}

.line2 {
  letter-spacing: 43.7px;
  font-size: 35px;
}

p.clear {
  clear: both;
}

<div id="wrapper">
  <span id="triggerModel"><img src="http://placehold.it/100x100" alt="" style="float: left; margin-right: 20%"></span>
  <img src="artist.jpg" alt="" style="float: left">
  <img src="web.jpg" alt="" style="float: right">
  <p class="clear"></p>
  <span class="line1">TWO&#9642;FOUR</span>
  <span class="line2">GRAPHICS</span>
</div>

Answer 1

#triggerModel:hover ~ body is not valid.

CSS does not currently have the ability to apply styles above an element. The most you can do is target a sibling that follows an element (which is what ~ does. And + is an sibling directly after)

Answer 2

This should work:

#triggerModel {
    z-index: 2;
    display: inline-block; 
}
#triggerModel:hover {
    background-image: url("http://i63.tinypic.com/vrc9op.jpg");
    background-repeat: no-repeat;
    background-position: fixed;
}