Expand Div Over Others on Mouse Over Jquery

Expand Div over others on mouse over jquery

Answer has been reworked based on the OP's clarification of his question

You will have to position .contenitore absolutely and position it from the top left corner of the parent container .principale. The parent should have a relative position while the content child should be absolutely positioned.

.principale {
    height: 240px;
    width: 210px;
    position: relative;
}
.principale .contenitore {
    background-color: #fff;
    height: 240px;
    width: 210px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

Also, you cannot use text-align: center to center the image element. Instead use margin: 15px auto:

.immagine {
    border: 1px solid maroon;
    margin: 15px auto;
    height: 168px;
    width: 168px;
    position:relative;
}

Upon the hover event, you change the size of the content and also animate the top and left positions:

$(window).load(function(){
$('.contenitore').hover(function() {
    $(this).animate({
        width: 300,
        height: 400,
        top: -80,  // Half the height difference 0.5*(400-240)
        left: -45  // Half the width difference 0.5*(300-210)
    }, 'fast');
    $(this).animate().css('box-shadow', '0 0 5px #000');
    $(this).css({
        zIndex: 100  // Change z-index so that is the positioned above other neighbouring cells
    });
}, function() {
    $(this).animate().css('box-shadow', 'none')
    $(this).animate({
        width: 210,
        height: 240,
        top: 0,
        left: 0
    }, 'fast');
    $(this).css({
        zIndex: 1
    });
});
});

See fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/

expand a div (on hover) on top of another div

here, I made one from scratch, the whole thing, but is has a different (and better) HTML layout, and it also uses pure CSS, no JavaScript required.

EDIT 1 Updated JSFiddle Better example & Better CSS layout.

HTML

<div class='box'>
    <div class='box-cnt'>Lorem ipsum dolor sit amet, dicunt perpetua te mei. Vis id tritani utroque copiosae...</div>

    <div class='box-share'>
        <div class='share-title'>Share</div>
        <div class='share-items'>
            <div class='item'>Facebook</div>
            <div class='item'>Google</div>
            <div class='item'>MySpace</div>
        </div>
    </div> 
</div>

CSS

.box {
    width: 400px;
    height: auto;
    min-height: 300px;
    padding-bottom: 55px;
    border: 1px solid lightgray;
    position: relative;
}

.box-share {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: lightgray;
    width: 100%;
    height: 50px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

    .box-share:hover {
        height: 100px;
    }

.share-title {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 3.2;
}

.share-items {
    width: 100%;
    height: 50px;
}

.box-cnt {
    width: 100%;
    height: auto;
}

.item {display: inline-block;height: 100%;margin: 5px;}

Here is an example JSfiddle

Expand / shrink div on hover / out with jQuery

You don't need a plugin.
Just add proper css and use jQuery animate:

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})

demo here

Expanding a div over another div on hover with transitions

You can try making the div.item position absolute by default.Then on hover change the width and left position of the div

A sample

body {  background: #cacaca;  padding: 5em;}
.container {  position: relative;  width: 100%;}
.item {  padding: 0.25em;  text-align: center;  display: inline-block;  width: 33%;  height: 200px;  background: whitesmoke;  vertical-align: middle;  position: absolute;}.item:hover {  cursor: pointer;  left: 0;  width: 100%;  -webkit-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;  z-index: 999;}
.test1 {  background: #c3c3c3;  left: 0px;}
.test2 {  background: #fafafa;  left: 33%;}
.test3 {  background: #474747;  color: white;  left: 66%;}

<div class="row expanded"><div class="container">  <div class="item test1">    <p>Test One</p>  </div>  <div class="item test2">    <p>Test Two</p>  </div>  <div class="item test3">    <p>Test Three</p>  </div></div></div>

css: expand div on hover without displacing other divs

See this demo: http://jsfiddle.net/6K7t4/24/

HTML:

<div id="items">    
    <div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
    <div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
    <div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
    <div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
    <div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
    <div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
    <div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
    <div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
    <div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
    <div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>
</div>

CSS:

#items { 
     width:300px; 
}

.item { 
    width:100px; 
    border:solid 1px #ccc;
    float:left;
    height:20px;
    z-index:0;
    overflow:hidden;
    position:relative; 
}  

.item:hover {
    overflow:visible;
    z-index:100;
}

.item:hover .inner { 
    z-index: 100;
}

.inner { 
    position: absolute;
    background: white;
    width: 100%;
}

Each .item is now positioned relatively and has new child which wraps all content inside it. Once div is hovered, .item's overflow:hidden is changed to overflow:visible and z-index of .inner is set to 100 (in order to show it above other divs).

UPD: New demo and updated code. For IE7 (z-index is changed for .item:hover, otherwise inner div is hidden below other .items in IE7)

Expanding a div on mouseover. (expands to the left or the right side)

Try this:

.myDiv .hoverContent {
    display: none;
}
.myDiv:hover .hoverContent {
    display: block;
}
.myDiv:hover img {
    float: left;
}

Hover element over other elements

This is happening because you are absolutely positioning your icon on hover, taking the element out of the document layout flow. This frees up the space that the icon was taking up which causes all of the icons below to shift into that newly occupied space.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

To fix this you just need to make sure that your icon is not taken out of the document flow.

One way to do this is to duplicate the icon for the hover state like this:

.nav {  display: inline-block;}
.nav__item {  cursor: pointer;  position: relative;}
.nav__item__hover {  position: absolute;  top: 0;  left: 0;  white-space: nowrap;  align-items: center;  background: green;  padding-right: 5px;  display: none;}
.nav__item:hover .nav__item__hover {  display: flex;}
.nav__item__hover svg {  padding-right: 10px;}
.nav__item__hover svg {  fill: red;}

<div class="nav">  <div class="nav__item">    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>    <div class="nav__item__hover">      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>      Fund Management    </div>  </div>  <div class="nav__item">    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>    <div class="nav__item__hover">      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>      Fund Management    </div>  </div>  <div class="nav__item">    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>    <div class="nav__item__hover">      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>      Fund Management    </div>  </div></div>

Expanding div on hover relative to a parent div with jQuery

Consider the following.

$(function() {
  $("#child3").hover(function() {
    // In
    $(this).css("width", $("#main").width() * 0.9);
  }, function() {
    // Out
    $(this).css("width", "");
  });
});

#main {
  width: 700px;
  box-shadow: inset 0 0 0 1px #000;
  padding: 10px;
}

#child1 {
  width: 150px;
}

#child2 {
  width: 100%;
}

#child3 {
  width: 100%;
  box-shadow: inset 0 0 0 1px #c00;
  padding: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="child1">
    <div id="child2">
      <div id="child3">content</div>
    </div>
  </div>
</div>

Hover over DIV to expand width

I think that you don't need javascript for this.

html,body{ margin: 0 auto; height: 100%; width: 100%;}body { background-color: black;}#growContainer{ display: table; width:100%; height:100%;}.grow{ display: table-cell; height:100%; width: 25%; -webkit-transition:width 500ms; -moz-transition:width 500ms; transition:width 500ms;}#growContainer:hover .grow{ width:20%;}#growContainer:hover .grow:hover { width:40%;}

<div id="growContainer"><div class="grow" style="background-color:#2A75A9;"></div><div class="grow" style="background-color:#274257;"></div><div class="grow" style="background-color:#644436;"></div><div class="grow" style="background-color:#8F6048;"></div></div>

Expand Div Over Others on Mouse Over Jquery