Switching image on hover in a button - html

Question

I'm trying to change an image that is placed in a button on hover. So far, I have managed for the image itself to change when you hover over it but not for when the button itself is hovered. Here is the code.
<style>
.btn-large{
width: 300px;
height: 350px;
}
.movie{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
}
#hardware:hover, #hardware:active{
background: #23c6c8;
color: white;
}
</style>
<a href="#" class="btn btn-large" id="hardware">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" onmouseover="this.src='http://i.imgur.com/BuK26gd.png'" onmouseout="this.src='http://i.imgur.com/u8wsfFL.png'" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>

Answer 1

you need to move the event handlers to the anchor instead of the img and search for the img tag
Demo
<a href="#" class="btn btn-large" id="hardware"
onmouseover="this.getElementsByTagName('img')[0].src ='http://i.imgur.com/BuK26gd.png'"
onmouseout="this.getElementsByTagName('img')[0].src = 'http://i.imgur.com/u8wsfFL.png'">
<figure>
<img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" />
</figure>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</a>

Answer 2

use something like this
<style>
.btn-large{
width: 300px;
height: 350px;
}
.image{
width: 90px;
height: 90px;
position: relative;
margin-top: 25px;
background:url("http://i.imgur.com/u8wsfFL.png");
}
.btn-large:hover .image{
background:url("http://i.imgur.com/BuK26gd.png");
}
.btn-large:hover .details{
background: #23c6c8;
color: red;
}
</style>
<div class="btn-large">
<div class="image">
</div>
<div class="details">
<h2>All Tickets</h2></br>
<p>View all tickets</p>
</div>
</div>

Answer 3

.btn-large {
width: 300px;
height: 350px;
}
.details {
background: url("http://i.imgur.com/u8wsfFL.png") no-repeat;
height: 90px;
}
.details:hover,
.details:active {
background: url("http://i.imgur.com/BuK26gd.png") no-repeat;
}
figure {
height: 90px;
}
<a href="#" class="btn btn-large" id="hardware">
<div class="details">
<figure>
</figure>
<h2>All Tickets</h2>
</br>
<p>View all tickets</p>
</div>
</a>
Quite simple - just add css for details and figure to your stylesheet and set a background image and a different one on hover. You can remove the alternating imgs from your html
Here is a fiddle