Slide up element on hover?


I am trying to fix something but it’s not working as i want to…

This is what i am trying to create:

So normal state the 3 color blocks have a height of 10px which i have set… but the problem is when i hover it pushing my content down instead of up.

So when you hover one block all 3 will go up… i have tried it but failed.

How can i change the height on hover but push the block UP instead of DOWN?

THanks :slight_smile:

Idea see top menu:

Hi there n_merciano,

here is a possible solution…


untitled document #container { width:54%; height:4vw; margin:2% auto 0; } .cols { position:relative; float:left; width:33.33%; height:100%; } #col1 { background-color:#3b5999; } #col2 { background-color:#29c5f6; } #col3 { background-color:#d84938; } .black { position:absolute; top:-10%; left:0; width:100%; height:100%; background-color:#000; transition:all 0.5s ease; } .cols:hover .black { top:-40%; }


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.