image OnMouse popout from container

Question

I am making a website where I am placing an "ad" which I want to hide under the container div, but you can still see the tip of it. when you take your cursor over it I want it to smoothly come out from underneath the container. And when you remove the cursor i would want it to go back to it`s first position under the container. Anyone know a simple css, a jquery, or a javascript I can use?

Thanks!

Edit

Thanks for all the responses! I am sorry if I just didn't get it, or if I was a bit unclear in my question, but i want the image to smoothly move horizontally from behind the my container on the right side to where my background is. so I want it to move and not just pop right out. So i basically want my picture to smoothly move back and fourth from underneath the container. When I place the cursor over the tip of the picture i want it to slowly move out from it's position under the container, and when i let go i want it to slowly go back. I see now that my title was a bit misleading, I'm sorry. Hope someone can help me!

Answer 1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#demo").on({
    mouseenter: function() {
var str = "background-color:red;  height: 100px; width: 100px";
$(this).attr("style", str);
    },
    mouseleave: function() {
var str = "background-color:red;  height: 10px; width: 10px";
$(this).attr("style", str);
    }
});
});

</script>

<div id="demo" style="background-color:red;  height: 10px; width: 10px"> <br/><br/><br/></div>

Answer 2

Use jQuery hover method:

$("#demo").hover(
    function() {
        $(this).css({'background-color', 'red'}).height(100).width(100);
    },
    function() {
        $(this).css({'background-color', 'red'}).height(10).width(10);
    }
);

Answer 3

This was fun

Live Demo

Script

$(function() {
  $("#demo").on({
    mouseenter: function () {
        $(this).css({
            "height": "100px",
            "width": "100px"
        });
    },
    mouseleave: function () {
        $(this).css({
            "height": "10px",
            "width": "10px"
        });
    }
  });
});

CSS

#demo {
    background-color:red;
    height: 10px;
    width: 10px;
    position:absolute;
    top:100px;
    left:100px;
    overflow:hidden;
}
#main {
    background-color:yellow;
    height: 100px;
    width: 100px;
    position:absolute;
    top:5px;
    left:5px;
}

HTML

<div id="demo">This is an ad</div>
<div id="main">Here is a div</div>