Hello,
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 
Idea see top menu:
http://www.bloomberg.com/europe
Hi there n_merciano,
here is a possible solution…
[code]
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%;
}
[/code]
coothead
system
Closed
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
