Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve the effect of mouse over text by CSS". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to achieve the effect of mouse over text in CSS" can help you solve the problem.

The idea of realization is:

First style the photo and text content, and make the text visible to invisible visibility: hidden. Add the hover style after that.

.photo: hover .text

Specific code:

The text appears over the mouse-(yisu.com) .photo {width: 428px; height: 100px; overflow: hidden; position: relative;} .photo .text {position: absolute; left: 0 Top: 0; right: 0; bottom: 0; background-color: rgba (0,0,0.4); color: white; text-align: center; visibility: hidden;} .Photo: hover .text {visibility: inherit }

Suspended text on "CSS how to achieve the mouse over the text effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.