How to make this inline-block appear more smoothly on hover

HTML & CSS
1

Greetins im trying to make this inline block appear more smooth(width-height) when hovering the text but cant seem to get it right. Im fairly new in html/cssso any help is greatly appeciated!

2

Hi,

I don’t know what sort of animation you were after but you can do something like this.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
	position: relative;
	display: inline-block;
	color:red;
}
.dropdown-content {
	opacity:0;
	z-index:-1;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding:0;
	transition:all .5s ease;
	min-width:0;
	width:0;
	max-height:0;
	overflow:hidden;
}
.dropdown:hover .dropdown-content {
	opacity:1;
	z-index:1;
	width:auto;
	min-width: 160px;
	max-height:99em;
	padding: 12px 16px;
}
.dropdown-content p{min-width:160px}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown"> <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</body>
</html>

If you are making a dropdown menu then usually you would use the nested list format to keep things organised and more semantic but the technique is basically the same.

CSS isn’t very good at animating to auto settings so you have to trick it with max-heights and padding to create some expansion when you have fluid content.

3

That’s pretty much it. Thanks a lot!

4

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