Show List Description on Hover Using CSS

This CSS code snippet helps you to create a stylish list with a description that show on hover. The list item changes size and reveals hidden text on hover. Helpful for interactive design showcasing info on hover.

You can use this code on websites for interactive elements. It’s great for showcasing information discreetly, and adding engaging hover effects to content.

How to Create Show List Description On Hover Using CSS

1. First of all, define a container <div> to hold individual boxes. Create multiple lists using <div> elements within the container. Each box contains content wrapped inside <div class="name">.

<div class="container">
	<div class="box box1">
			<div class="name">
				<h4>Tap here</h4>
				<h5>Hello</h5>
			</div>
		</div>		
	<div class="box box2">
			<div class="name">
				<h4>Tap here</h4>
				<h5>Hi</h5>
			</div>
		</div>	
	<div class="box box3">
			<div class="name">
				<h4>Tap here</h4>
				<h5>Bye</h5>
			</div>
		</div>	
	<div class="box box4">
			<div class="name">
				<h4>Tap here</h4>
				<h5>Bye!</h5>
			</div>
		</div>	
</div>

2. The CSS sets up the layout, styling, and hover effects for the boxes. It specifies box sizes, colors, font styles, and transitions. Utilizes pseudo-elements (::before) to display images and create hover effects.

On hovering over a box, it expands in size (height adjustment) and reveals hidden text (<h5> inside .name). The pseudo-element (::before) enlarges and changes appearance on hover, mimicking an interactive effect.

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #eee;
  font-family: "Roboto", sans-serif;
  background: #dfe4ea;
}
body .container {
  width: 300px;
  font-size: 1.2em;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
body .container .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 0px 20px;
  transition: all 0.3s;
  color: white;
}
body .container .box.box1 {
  background-color: #7986CB;
}
body .container .box.box2 {
  background-color: #FF8A65;
}
body .container .box.box3 {
  background-color: #F06292;
}
body .container .box.box4 {
  background-color: #4DB6AC;
}
body .container .box .name {
  order: -1;
}
body .container .box .name h4, body .container .box .name h5 {
  font-weight: 300;
}
body .container .box .name h5 {
  font-size: 0em;
  line-height: 1.5;
}
body .container .box:before {
  content: "";
  height: 0px;
  width: 0px;
  border: 2px solid white;
  border-radius: 50%;
  margin-right: -50%;
  background-color: white;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
body .container .box.box1:before, body .container .box.box3:before {
  background-image: url("https://a1alimo.com/wp-content/uploads/2017/05/011-girl.png");
}
body .container .box.box2:before, body .container .box.box4:before {
  background-image: url("https://image.flaticon.com/icons/png/128/163/163807.png");
}
body .container .box:hover:before {
  content: "";
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-right: 0%;
  transition: all 0.4s;
}
body .container .box:hover {
  height: 120px;
  transition: all 0.3s;
}
body .container .box:hover .name h5 {
  font-size: 0.7em;
  transition: all 0.6s;
}

Modify the container size, box colors, and fonts in the CSS to match your site’s aesthetics. Change the content inside the boxes to display relevant information.

That’s all! hopefully, you have successfully created a stylish list with a description on hover using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.