how to text zoom effect in css
Question
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>
3 answers
solution1
4 ACCPTED 2016-05-20 08:15:08
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;
}
solution2
2 2016-05-20 08:14:36
Using transform: scale() like you did is a good way to implement this. However, you'll want to reset the scale to it's normal value when :hover .
Since li have by default display: list-item they take up 100% of the available width. As such, doing the zooming on the center of the li when the text is aligned to the left will make the text disappear. Wrap your text in a span that has display: inline-block in order to zoom in on the center of the text instead.
Also, the website you linked has the text fade in/out as well. Add opacity: 0 to your span to make it invisible, and then have it transition to opacity: 1 on :hover to achieve this fade in/out effect.
Also transform: translateY(100px) is probably not needed, nor is the duplicate transition property inside your :hover .
Demo 1 - no opacity , no box, animate from left
ul li { background: lightgrey; list-style: none; margin: 5px 0; } ul li span { position: relative; left: -100%; font-size: 20px; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } ul li:hover span { left: 0; transform: scale(1); } span { display: inline-block; }
<ul> <li><span>Text effect</span></li> <li><span>Text effect</span></li> <li><span>Text effect</span></li> <li><span>Text effect</span></li> </ul>
Demo 2 - with opacity , box. As shown in attached link
ul li { list-style: none; width: 200px; height: 200px; border: 5px solid black; margin: 10px; background: #FAEBD9; overflow: hidden; float: left; } ul li span { font-size: 20px; opacity: 0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } ul li:hover span { opacity: 1; transform: scale(1); } span { display: inline-block; }
<ul> <li><span>Text effect</span></li> <li><span>Text effect</span></li> <li><span>Text effect</span></li> <li><span>Text effect</span></li> </ul>
solution3
1 2019-05-05 04:26:34
you can do the following:
<style> #test-text:hover { font-size: 20px; } </style> <body> <p id=test-text>TEST</p> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.