Расширение div на мыши наведите курсор на изображение, которое находится в центре этого div

Question

Я новичок в веб-дизайне, я хочу разместить 4 divs по горизонтали, с небольшим изображением в центре каждого divs; при наведении курсора мыши на это изображение, этот div должен увеличиваться, показывая больше содержимого. Вот что 'плюс' изображение ссылка-

http://www.nike.com/etc/designs/nike/pes/images/plus.png

<div id="hov_text" 
    style="position: relative; width: 1350px; height: 400px; margin- top: 20px;"> 
    <div id="ord1"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">SHOES</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S SHOES</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Running</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Basketball</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">NikeiD</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord2" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Clothing</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S 
      CLOTHING</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">T-Shirts</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Jackets & 
      Vests</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Hoddies & 
      Swetshirts</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Pants</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord3" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">GEAR</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S GEAR</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Accessories</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">SPARQ</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Socks</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Bags & 
      Backpacks</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord4" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Others</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Clearence</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">ASDF</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">NFL</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Sportswear</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
</div> 

Answer 1

Вы можете использовать на функцию одушевленного в JQuery,

Проверить this ссылку, которая может помочь вам

Answer 2

Проверить эти ссылки, которые могут помочь вам в решении вашей проблемы:

Relatively Simple 3 Equal-Height Columns CSS Liquid Layout

3 columns fluid layout

Example of 3 columns layout

3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)