I would like an easier / efficient way to edit the CSS of the `<img class "search-button>` when hovering over `<button class="search-button">` instead of changing the `search-button` itself like I have done below. 

The fact that the `img` is changing height and the button isn't is also bizarre to me. I would think changing the `height` attribute would change the `height` of the button and not the `height` of the `img`

Is it possible to do without using Javascipt and a pure CSS method? An explanation would be appreciated as I am self-studying and more information is far valuable than just a solution.

**After fix and edit - My Question : Could it be simplier?**

HTML

```
<button type="submit" class="search-button">
    <img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>

```

CSS

```
search-button {
  padding:0px;
  margin:0px;
  width:145px;
  height:145px;
  border-radius: 5px;
  background-color:transparent;
  overflow:hidden;
}

.search-button-img {
  height:80%;
}

.search-button:hover .search-button-img { /*Fixed hover space */
  margin-top:-1px;
  margin-left:-1px;
  height:100%;
}

```

Original : <http://jsfiddle.net/x8xwxg3z/>

Updated (Working Well) : <http://jsfiddle.net/x8xwxg3z/5/>

\*random magnifier image for example