Show List Description on Hover Using CSS

Show List Description on Hover Using CSS
Code Snippet:Stylish Menu
Author: Shalini Gandhi
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 377
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X