Transition of dropdown element fade-in and fade-out on hover

I ripped off this site: http://www.w3schools.com/CSS/css_dropdowns.asp
And I tried applying it to my own project. The problem is that I’d like to appear smoothly, and disappear smoothly. I tried CSS transition, but to no avail. And after first attempt, I’m out of idea’s, this is something I never tried before on object with modifable display property. The result (not a lot modified):

Hi there QuietStack,

and a warm welcome to these forums. :sunglasses:

Try it like this…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
.dropdown {
    display: inline-block;
}
.dropdown p {
    width: 9.37em;
    padding: 0.31em;
    border: 0 solid #fff;
    opacity: 0;
    transition: all .75s ease-in-out;
 }
.dropdown span:hover+p {
    border: 1px solid #f00;
    opacity: 1;
 }
</style>

</head>
<body> 
<div class="dropdown">
 <span>Mouse over me</span>
 <p>Hello World!</p>
</div>
</body>
</html>

coothead

1 Like

The importance would be that that element preserves it’s display: none while not hovered and positioned out of order (position:).

Thanks for the smart idea, but the hover element is floating, and so must the dropdown. It has been created for this sole purpose.

Hi there QuietStack,

try it like this…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
.dropdown {
    display: inline-block;
    max-height: 1.6em;
    overflow: hidden;   
    transition: all .75s ease-in-out; 
}
.dropdown p {
    width: 9.37em;
    padding: 1.31em .31em;
    margin: .25em 0 0 0;
    border: 0 solid #fff;
    opacity: 0;
    transition: all .75s ease-in-out;
 }
.dropdown:hover {
    max-height: 100%;
 }
.dropdown:hover p {
    border: 1px solid #f00;
    opacity: 1;
 }
</style>

</head>
<body> 
<div class="dropdown">
 Mouse over me
 <p>Hello World!</p>
</div>
</body>
</html>

coothead

2 Likes

Hi there QuietStack,

I forgot to mention that there can never be a transition between
“display: none” and “display: block” , it is always instantaneous. :mask:

coothead

I know, I just hoped that there would be way to have it opacity: 0 and display: none, and on hover it goes instantly on display: block and animated the opacity.

You can achieve the same result by placing the element off screen to hide it but only animating the opacity.

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    position: absolute;
    padding: 5px;
    width: 150px;
    border: 1px solid red;
	left:-999em;
	opacity:0;
	transition:opacity 2s ,left 2s 2s;
}

.dropdown:hover .dropdown-content {
   	left:0;
    opacity: 1;
	transition:opacity 2s linear;
}


</style>
</head>
<body> 
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</body>
</html>
4 Likes

PERFECT.

Thank you.

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