HTML Element Style How to - Bump Up Image when hover

Question

We would like to know how to bump Up Image when hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.example-1 img {<!--   w  w w . jav a  2s  .co m-->
  border: 5px solid #ccc;
  float: left;
  margin: 15px;
  -webkit-transition: margin 0.5s ease-out;
  -moz-transition: margin 0.5s ease-out;
  -o-transition: margin 0.5s ease-out;
}

.example-1 img:hover {
  margin-top: 2px;
}
</style>
</head>
These CSS3 effects tested and supported all modern browser i.e Chrome,
Firefox, Opera, Safari. IE 8 not supported
<div class="example-1">
  <img src="http://placehold.it/300x300"
    style="width: 200px; height: auto;" /> 
  <img src="http://placehold.it/300x300"
    style="width: 200px; height: auto;" />
</div>
</body>
</html>

The code above is rendered as follows: