Q:

Wrap Image with div on hover using JQuery

I have to make a window whenever I hover over any image. The constraint is the window is defined and should not be repeated. Means, if I have 10 images, instead of 10 similar windows, only 1 window should dynamically change its width height and position (left, right, top, bottom) to act as a border for the image. The border effect can be obtained using CSS but I have other requirements for which I need this dynamic border effect.  
<div>  <!-- This is the border div -->
   <div id="top" class="imageBorder" style="display: block; width: 105px">Top</div>
   <div id="left" class="imageBorder" style="display: block; width: 105px"></div>
   <div id="right" class="imageBorder" style="display: block; width: 105px"></div>
   <div id="bottom" class="imageBorder" style="display: block; width: 105px">Bottom</div>
</div>

This above div is used as the window. Whenever I hover on any image, this div should surround it. I don't want this div to be copied and associated to each image at a time. 
JSFiddle

A:

If the images are not thumbnails and they are different sizes then you can make a single container's width and height dynamic based on the selected/active image's width and height. 
HTML: 
<div id="container"></div>

<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />

CSS
 #container{
  position: absolute; 
  width: 100px; 
  height: 100px;
  background-color: red; 
  z-index: 2; 
  display:none;
 }
.img{max-width: 80px; max-height: 80px; z-index: 10000;}

JS/jQuery
 $(document).ready(function(){
    $(".img").hover(function(){
       //on mouseenter
       var img = $(this);
       img.addClass("this");
       var c =  $("#container");   
       //change container width/height based on image size
       c.css({width:img.outerWidth() + 20, height:  img.outerHeight + 10});
      //position container
      c.css({top:img.offset().top - 10, left:  img.offset().left - 10,   position:'absolute'}).fadeIn("fast");
      //reset other images z-index
      $(".img:not(.this)").css("zIndex","1");
   }, function(){
  //on mouseleave
  if(!$("#container").css("display","none"))
      $("#container").fadeOut("fast");             
      $(".img").css("zIndex","4");                 
      $(this).removeClass("this");
});
});

JSFIDDLE
Explanation
jQuery is the most powerful javascript library out there, I suggest you learn how to use this exclusively as it will sharpen your javascript skills and improve your UI skills as well. Typically I define my html elements using classes and ids so I can take advantage of javascript/jQuery.
.hover
I am using the .hover event handler which is explained in detail here. Using this event handler you can define the mouseenter and mouseleave using a single handler as the first anonymous function handles the mouseenter while the second handles the mouseleave.
.css
This jQuery method allows you to do practially anything you want to your html's css on the fly.
NOTE: outerWidth(), outerHeight() or width(), height() will have different results. Using which one depends on whether or not the element has box-sizing:border-box or border.
.css("zIndex", "4")
This is jQuery's way of editing css z-index on the fly. This is how the #container is able to overlap the other images not active.
$(this)
When you use an event handler (I suggest you learn  how to use as many as possible) with a css class the $(this) becomes invaluable. This allows you to isolate the element from the class inside the event handler. 
.addClass("this")
The addClass() and removeClass() is how you can improve the user experience.
I use this alot with hidden and disabled where I need to disable buttons or hide them etc.  
.not("this)
This is a quick and easy way to isolate the element for longer than the event handler is in scope. I use this alot in dropdown lists aka select lists. 
fadeIn('slow'), fadeOut('fast') 
Use this jQuery method with any html element that has the property: display: none. It allows you to toggle whether or not the element is visible which is an upgrade over toggling between display: none - block or inline
In closing
The one thing you must familiarize yourself with when it comes to event handling and that is propagation! When dealing with event handling the event listeners will listen for an event based on the following:
A: the type of event 
ie: on('click'), on('submit'), on('mouseenter'), on('change') etc...
and 
B: the type of element
ie: class, or html element (ie: div, input, select, a, button etc...)
This can cause erroneous results especially if the elements are created dynamically. 
Get familiar with event propagation, event bubbling and event closures!

