Change Height-Top of Item When Hover

Change height-top of item when hover

A similar effect can be achieved using negative margins to move the element up, then padding to move the text back to its original position.

#menu a:hover {
    margin-top: -10px;
    padding-top: 10px;
    background-color: #6666AA;
}

Example: http://jsfiddle.net/bwQCL/1/

How to increase the height of column div on hover preserving the position of other columns?

Wrap the product div in a new div with position: relative. Then set the product div to position:absolute and use Z-index to make sure it shows over adjacent divs.

http://codepen.io/sol_b/pen/VmXbzV

<div class="row">
    <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>      
  <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>    
  <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>    
</div>

.row{
    position: relative;
    width:550px;
    height:500px;
    margin: 0 auto;
}
.product-wrap{
    position:relative;
    float:left;
    width:150px;
    height:150px;
    margin:10px;
}
.product{    
    background:black;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:150px;
  transition: 0.2s;
}
.product:hover{
    z-index:100;
    width: 150px;
    height:200px;
    background: grey;
}

Change width and height of element on hover

If you want to stick with this method (there may be other methods that are simpler and more efficient), use absolute positioning, which removes elements from the normal flow, instead of relative positioning, which doesn't and, therefore, impacts surrounding elements.

Here's a basic example:

.cont {  position: relative;}
.some {  width: 250px;  height: 250px;  position: absolute;}
.some:hover {  z-index: 10;  width: 500px;  height: 500px;}
img:nth-child(1) { top: 0; left: 0; }img:nth-child(2) { top: 0; left: 255px; }img:nth-child(3) { top: 0; left: 510px; }img:nth-child(4) { top: 255px; left: 0px; }img:nth-child(5) { top: 255px; left: 255px; }img:nth-child(6) { top: 255px; left: 510px; }

<div clas="cont">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png">  <img class="some" src="http://placehold.it/500x500.png"></div>

css hover effect height in list item

I'm not sure of the exact layout you want, but in general just add position: absolute to the images on hover. e.g.

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
  position: absolute;
  margin-top: 20px;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

How to make menu item appear bigger height on hover?

Here is a solution using a pseudoelement to create the extra height:

*For this to work you need to remove overflow: hidden on ul, and replace it with a fixed height.

nav ul {  padding: 0;  margin: 0;  list-style: none;  background-color: #404040;  height: 49px; /* plus 4px for the new border */  border-bottom: 5px solid #3696DD;}
nav ul li {  float: left;}
nav ul li a {  text-decoration: none;  display: block;  padding: 15px 40px 19px; /* plus 4px to bottom to keep text centred */  color: #FFFFFF;  font-size: 15px;  font-family: Calibri;  font-weight: bold;  position: relative;}
nav ul li a::after {  content: '';  position: absolute;  top: -4px;  left: 0;  width: 100%;  height: 4px;  border-top-left-radius: 4px;  border-top-right-radius: 4px;}
nav ul li:hover a {  background-color: #3696DD;}
nav ul li:hover a::after {  background-color: #3696DD;}

<body>    <nav>        <ul>            <li><a href="#">Home</a></li>            <li><a href="#">Products</a></li>            <li><a href="#">Company</a></li>            <li><a href="#">Contact</a></li>        </ul>    </nav>

Vertically aligned fixed-height multi-line list item with hover behavior for entire item (not just text)

Move :hover to li element. In the case above instead of whole #navbar a:hover selector put:

#navbar li:hover {
  background-color: #feb800;
  color: #ffffff;
}
#navbar li:hover a {
  color: #ffffff;
}

And background for span should not be that general, as it will affect all spans on page.

CSS: On hover make list item bigger than other children

The problem is that on hover other items are also affected, they also expand?

Of course they do, because they are all children of the same flex container - and adding padding to one of the items changes the height of the container, so the others grow with it accordingly.

You can easily counter this by giving the hovered item a matching negative margin-bottom:

ul li:hover {
  padding-top: 40px;
  margin-bottom: calc(1em - 40px); // your default li padding was 1em,
                                   // so we have to calculate the right difference here
  background-color: #333;
}

https://jsfiddle.net/fnu483z0/18/

css hover effect height of active list item

Giving each of the name divs a height stops them from expanding to the size of the image, but then the names below obscure the images. As a solution I added z-index so the images display on top. Is that what you were trying to achieve?

No, I want any name elements not to be hidden. like this link hizliresim.com/cou4bn6 –
furkancetkin

Okay, well in the example it looked like the names were partitioned in to 3 columns, so I have done that instead. The drawback of grid is the height of the rows are linked. If you just have one row per column, and each of those is a flex container, things get a bit easier. You could likely refactor to use flex for the .names container as well to help with responsiveness.

Updated snippet:

.names {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .names div div {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 16px 0;
        text-align: center;
    }

    .names div a {
        font-size: 16px;
        color: #25282e;
        text-decoration: none;
        z-index: 1;
    }

    .names div a:hover {
        font-weight: 700;
    }

    .names div a:hover~img {
        display: block;
        z-index: 2;
    }

    .names div img {
        width: 40px;
        margin-top: 16px;
        display: none;
    }

<div class="names">
    <div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
    </div>
    <div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
    </div>
    <div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
        <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
    </div>
</div>

Change Height-Top of Item When Hover