[Solved] Changing button image on hover

by


Here is a simple snippet that accomplishes the items you ask. I used jQuery’s hover function to attach event handlers to modify the images.

I set 0 font-size, padding, and margin on the container (body) and used 50% width and 50vh (viewport height) to get 4 equal quadrant buttons.

$('button').hover(function() {
  $(this).find('img').attr('src', 'http://via.placeholder.com/200x150');
}, function() {
  $(this).find('img').attr('src', 'http://via.placeholder.com/350x150');
});
body {
  font-size: 0;
  margin: 0;
  padding: 0;
}

button {
  box-sizing: border-box;
  width: 50%;
  height: 50vh;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>
<button><img src="http://via.placeholder.com/350x150"></button>

5

solved Changing button image on hover