How to make a part of image have transitions on hover

Question

hey i wanna know how to make a part of a image have transitions when we hover on it like on my website :-perfectionunleashed.in i got this template from internet
when i hover on second box "mission" comes with ease-in-out effect i cant get anything in my head while viewing source.
will anybody view it by source and tell me how its done.

Answer 1

CSS for "Coming Soon" buttons:
.grad2 {
    display: block;
    width: 232px;
    height: 132px;
    text-indent: -99999px;
   background:url('images/grad2.png') right;
     opacity:0.0;
    -moz-transition: all 540ms ease-in-out 0s;
    transition: all 540ms ease-in-out 0s;
    -webkit-transition: all 540ms ease-in-out 0s;
.grad2:hover {
    background:url("images/grad2.png") no-repeat scroll 0px 0px;
    box-shadow: 0px 0px 4pt rgba(0,0,0,0.9) inset;
    -moz-transition: all 540ms ease-in-out 0.0s;
    transition: all 540ms ease-in-out 0.0s;
    -webkit-transition: all 540ms ease-in-out 0.0s;
    opacity:1;
.coming {
    display: block;
    width: 232px;
    height: 132px;
    text-indent: -99999px;
    background:url('images/grad_coming.png') left;
    opacity:0.0;
    -moz-transition: all 540ms ease-in-out 0s;
    transition: all 540ms ease-in-out 0s;
    -webkit-transition: all 540ms ease-in-out 0s;
.coming:hover {
   background:url("images/grad_coming.png") no-repeat scroll -232px 0px;
    box-shadow: 0px 0px 4pt rgba(0,0,0,0.9) inset;
    -moz-transition: all 540ms ease-in-out 0s;
    transition: all 540ms ease-in-out 0s;
    -webkit-transition: all 540ms ease-in-out 0s;
    opacity:1;
All buttons are inside a table.  This is the HTML for "Coming Soon."
<td>
     <div class="grad2">
      <div class="coming">
     <a class="coming" href="http://perfectionunleashed.in/"></a>
     </div>
     </div>
</td>
Nancy O.