CSS Interview Question 3

CSS Interview Question 3

by misostack

HTML

<h1>The transition-property Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div class="div-width"></div>


<div class="div-height">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo architecto quo, asperiores labore quis hic repellat. Ab iure, ullam voluptate maiores reprehenderit quam, assumenda consequatur labore perspiciatis totam hic illo.</p>
</div>

CSS

.div-width {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 20px;  
}

.div-width:hover {
  width: 300px;
  transition: width 2s;
}



.div-height {
  width: 100px;
  overflow: hidden;
  background: green;
  height:10px;  
  color: green;  
}

.div-height:hover{
  height:auto;
  color: black;
  transition: transform 2s ease-out;
}