jQuery hover effect on image

I am trying to get a simple hover effect with jQuery on an image. What I want to get eventually is a green hovering effect, with a text appearing along with the color. I don't know if I'm being clear.

For now, I just want the simple color hover effect to work.

Here is what I did first:

$("img").hover(
    function() {
        wid = $(this).width();
        hei = $(this).height();
        $("<div id='hover'></div>").insertBefore(this);
        $("#hover").css({
            "background-color": "rgba(60,147,138,0.2)",
            "width": wid,
            "height": hei,
            "z-index": "3",
            "position": "absolute"
        });
   },
   function() {
       $("#hover").remove();
   }
);

That code there is generating an empty div on top of my image with a transparent green background, to get that green hover effect. But it doesn't work great, and my guess is that the mouse is not on the image anymore, but on that div that has appeared just above it.

So I tried this then:

$("img").mouseenter(
    function() {
        wid = $(this).width();
        hei = $(this).height();
        $("<div id='hover'></div>").insertBefore(this);
        $("#hover").css({
            "background-color": "rgba(60,147,138,0.2)",
            "width": wid,
            "height": hei,
            "z-index": "3",
            "position": "absolute"
        });
    }
);

$("#hover").mouseleave(
    function() {
        $(this).remove();
    }
);

The hover effect is stable as I expected, but the mouseleave event just doesn't work. I don't know what to do.

Any help would be appreciated!

Edit: Oh, and here is the JSFiddle, just in case

A small digression first...
what you're trying to do can be easily done using CSS only and the :hover pseudo

.imgWrapper,
.imgWrapper img{
  position:relative;
  display:inline-block;
  vertical-align:top;
}
.imgWrapper span{
  position:absolute;
  z-index:1;
  top:0; bottom:0; left:0; right:0;
  background:rgba(60,147,138,0.2);
  padding:24px;
  text-align:center;
  color:#fff;
  opacity:0;
  transition: 0.3s;
  font-size:2em;
}
.imgWrapper:hover span{
  opacity:1;
}

<span class="imgWrapper">
  <img src="http://lemagcinema.fr/wp/wp-content/uploads/2014/11/alain_delon_59055-1024x768-500x372.jpg" width="300">
  <span>This is an<br>image caption!</span>
</span>

To answer your jQuery question

$("#hover").mouseleave(

at the time you're assigning that function there's no #hover element on the page.

this would do it:

$("img").mouseenter(function() {

  var wid = $(this).width();
  var hei = $(this).height();

  $("<div id='hover' />").insertBefore(this);

  $("#hover").css({
    "background-color": "rgba(60,147,138,0.2)",
    "width": wid,
    "height": hei,
    "z-index": "3",
    "position": "absolute"
  }).mouseleave(function() {
    $(this).remove();
  });

});

or even better you don't need the #ID at all: https://jsfiddle.net/q5r3a00x/5/

$("img").mouseenter(function() {

  var wid = $(this).width();
  var hei = $(this).height();

  $("<div />", {
    insertBefore : this,
    mouseout : function(){
      $(this).remove();
    },
    css : {
      backgroundColor: "rgba(60,147,138,0.2)",
      width: wid,
      height: hei,
      position: "absolute"
    }
  });

});