I think I'm trying to do a pretty simple effect. I have a menu with 4 icons and I would like for the description to slide right when hovering. I'm not sure I'm able to do this with CSS because the div is after the first div's closing tag and I tried +
but nothing happened.
Is it a problem with the display:flex
? I gotta say I'm not used to work with that.
My code is here, I lowered the opacity of the #mainicons i
just so you can see something of what's going on but it should be 1.
#mainicons {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}
#mainicons i {
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40;
height: 40px;
width: 50px;
padding: 10px;
color: white;
background: black;
text-align: center;
font-size: 15px;
line-height: 40px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#mainicons i:hover {
border: 1.5px solid black;
color: black;
background: white;
}
#icondesc {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}
#icondesc i {
display: flex;
flex-direction: column;
justify-content: space-between;
top: 50%;
margin: 80;
color: black;
background: white;
width: 70px;
height: 50px;
line-height: 40px;
padding-left: 0px;
font-size: 15px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#mainicons i:hover+#icondesc i {
margin-left: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="icondesc">
<i>Home</i>
<i>Ask</i>
<i>Request</i>
<i>Archive</i>
</div>
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i></a>
<a href="/ask"><i class="fa fa-envelope"></i></a>
<a href="/submit"><i class="fa fa-pencil "></i></a>
<a href="/archive"><i class="fa fa-clock-o"></i></a>
</div>
Thank you for the replies!
The problem is not related to flex. You're trying to target elements based on the hovering of elements coming later in the DOM. That's basically an attempt to create a previous sibling selector, which is not natively possible in CSS.
I would put the text description in the same container with the icons and use absolute positioning for the transition effect. Here's a rough sketch:
#mainicons {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
display: flex;
flex-direction: column;
}
#mainicons>a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#mainicons i {
opacity: 1;
height: 40px;
width: 50px;
padding: 10px;
color: white;
background: black;
text-align: center;
font-size: 15px;
line-height: 40px;
transition: all .5s ease;
}
#mainicons i:hover {
border: 1.5px solid black;
color: black;
background: white;
}
#mainicons span {
color: black;
background: white;
width: 70px;
font-size: 15px;
transition: all .5s ease;
position: absolute;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
left: -100px;
opacity: 0;
}
#mainicons a:hover>span {
opacity: 1;
left: 70px;
transition: .5s;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i><span>Home</span></a>
<a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
<a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
<a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments