Hide/show toggle on hover with fade in css - html

Question

I have this simple hide/show toggle which fades in/out text when hovering. The only problem is, I don't want it to be invisble (because it takes up unnecessary space). But when I add display element the fade function doesn't work anymore.
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
display: inline-block;
}
`
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
WITH FADE ANIMATION, but just hidden: jsfiddle
WITHOUT FADE ANIMATION, but appears when hovering and doesn't take up space jsfiddle
Is it possible to maintain the fade animation without the text just being invisible?

Answer 1

You can use max-height to remove the unwanted space
See code snippet bellow:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
max-height:0;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
max-height:100%;
}
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
And if you want it to always take no space, you can use absolute position to make go out of the flow of the document
See code snippet:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
position:absolute;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
.wrapper{
position:relative;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>

Answer 2

I would wrap your divs in another box and then absolutely position your hidden text so it doesn't take up any space - comments in code to explain what is happening
/* add a container */
.container {
position: relative;
}
#stuff {
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
display: inline-block;
/* position stuff underneath the container */
position: absolute;
top: 100%;
/* give the background a colour so you can't see anything below */
background: #ffffff;
}
#hover {
width: 150px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
opacity: 1;
}
`
<div class="container">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
</div>
Some content below