JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<div id="container">
 <div id="image">
     <a href=""><img src="http://www.amitabha.in/resource/images/lifenot.png" width="462" height="48" id="new" style="display:none;" class="img1" /></a>
</div>

<div id="image1">
<a href=""><img  src="http://www.amitabha.in/resource/images/but.png" width="358" height="48" id="new1" style="display:none;" class="img2" /></a>
</div>

</div>

CSS

*html, body
{
    margin:0;
    padding:0;
    background:#000;}
    body
    {
        background:#000;}
    
    #container
    
    {
        width:640px;
        height:480px;
        margin:200px auto;
        background:url(http://www.amitabha.in/resource/images/life_bg.jpg) no-repeat;}
    
      

.img1
  {
      position:absolute;
      margin-left:92px;
      margin-top:130px;}
      
      
      .img1
  {
      position:absolute;
      margin-left:92px;
      margin-top:130px;}
      
      .img2
  {
      position:absolute;
      margin-left:191px;
      margin-top:209px;}

JavaScript

$("#image,image1").ready(function(){
      $("#new,#new1").stop(true, true).fadeIn(1500);
      
       $("#image").delegate("img", "hover", function(){
    $(this).animate({ 
            width: 482, height: 50 
        }, 500, function() {
    $(this).animate({ width: 462, height: 48 });
  });

});
   $("#image1").delegate("img", "hover", function(){
    $(this).animate({ 
            width: 368, height: 50 
        }, 100, function() {
    $(this).animate({ width:358, height: 48 });
  });

});
});