Anubhav pun Anubhav pun - 6 months ago 36
CSS Question

how to text zoom effect in css

I want to zoom the text as like this. but in this text opacity:0. I don't have to hide the text the text opacity:1 and i don't want box as like that only text would be zoom

I tried the following but without success:



ul li {
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}

ul li:hover {
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}

<ul>
<li>Text effect</li>
<li>Text effect</li>
</ul>




Answer

Try something like this:

HTML

  <ul>
    <li><p>Text effect</p></li>
    <li><p>Text effect</p></li>
  </ul>

Css

ul li{
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline-block;
  float: left;
  margin: 10px;
  overflow: hidden;
  text-align: center;
}
ul li p {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover p{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

Try here http://jsbin.com/xohimubeso/edit?html,css,output

Comments