Show child element in hover of parent element

Question

Show child element in hover of parent element

Navigation

#1 by (0 votes)

0

I hope you can help me with this question I have regarding CSS.

You see, I have my parent element with a child element, which I want to appear when the mouse is positioned on the parent element.

The child element initialized it with a height of 0px , and when I positioned on the father I changed the height of the son, but I would like to know if there is any way to show the son's elements when he has reached his maximum height.

Example:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  display: flex;
  align-content: center;
  justify-content: center;
  border: 1px solid #FFF;
  background-color: #FFAB91;
  color: #424242;
}

.container:hover .show {
  visibility: visible;
  height: 80px;
}

.container:hover button {
  visibility: visible;
}

.show {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  background-color: #D84315;
  color: #FFF;
  width: 100%;
  height: 0px;
  transition: all 0.5s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  visibility: hidden;
  transition: all .5s ease-in;
}

<div class="container">
  <h5>Categoría 1</h5>
  <div class="show"><button>Ver +</button></div>
</div>
<div class="container">
  <h5>Categoría 2</h5>
  <div class="show"><button>Ver +</button></div>
</div>
<div class="container">
  <h5>Categoría 3</h5>
  <div class="show"><button>Ver +</button></div>
</div>

css hover

asked by DevPHP 09.02.2018 в 05:48

source

1 answer

Get a date from the day number Python scripts in arcgis

score 0 · Accepted Answer

I do not know if it's what you need but I added a btn class to the button and then I animated it with keyframes and I put a delay to the 0.6s button, then I share the code with you.

.container {
	  position: relative;
	  width: 300px;
	  height: 200px;
	  display: flex;
	  align-content: center;
	  justify-content: center;
	  border: 1px solid #FFF;
	  background-color: #FFAB91;
	  color: #424242;
}

	.show {
  position: absolute;
  bottom: 0;
  background-color: #D84315;
  color: #FFF;
  width: 100%;
  height: 0px;
  transition: all 0.5s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
  .container:hover .show{
    height: 80px;
  }
  
  .btn{
  	animation-name: btn;
  	transition-delay: 0.6s;
  	visibility: hidden;
  }
  .container:hover .btn{
    visibility: visible;
  }
  @keyframes btn {
			0% {
				
				opacity: 0;
			}
			100% {
				
				opacity: 1;	
			}
		}

<div class="container">
  <h5>Categoría 1</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>
<div class="container">
  <h5>Categoría 2</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>
<div class="container">
  <h5>Categoría 3</h5>
  <div class="show">
  	<button class="btn">Ver +</button>
  </div>
</div>