Home > Developer > Web Develop

The DIV CSS mouse hovers over the picture when the text appears above the picture

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

div CSS Mouse hover over the picture when there is no text content above the picture display text, is completely pure CSS div implementation. CSS implementation of the mouse hover over the picture above the display of beautification content.

The original picture shows no text above, the text is displayed when the mouse hovers over, and the text background is translucent. You can use pure div+css to realize the display of text content on a mouse hover picture.

Pure DIV+CSS Implementation of the first picture without text content, mouse hover when the second picture appears as the effect

Using div CSS to display the text content above the mouse hover picture principle: First we set up a box object, and the picture is set as a CSS background image using the style tag, and set the object HTML a hyperlink Display:none hidden, The hyperlink anchor text is placed inside the text content, and finally set the mouse hover over the entire object when the hyperlink content is displayed.

It is important to note that we used the CSS position absolute positioning hyperlink a tag underneath the box object, and to beautify the effect to the HTML a tag width is the same as the object width, set a certain height, set the CSS background is a translucent background color.

In order to be compatible with IE6 we use the IE6 support hover plugin. Control reading understand IE6 hover support. This effect is compatible with all major browsers including IE6.

The full HTML source code is as follows:

  2. <! DOCTYPE HTML>
  4. <html>
  6. <head>
  8. <Meta charset="utf-8" />
  10. <title> Mouse hover picture on display text online demo www.divcss5.com</title>
  12. <style>
  14. img{border:0}/* CSS Comment Description: Set picture border is 0 */
  16. Body{behavior:url ("CSSHOVER.HTC"); text-align:center;} /* CSS Comment Description: Compatible with IE6 support tag using hover */
  18. . divcss5{position:relative;width:554px; height:346px;margin:0 Auto}
  20. . divcss5 a,.divcss5 span{display:none; Text-decoration:none}
  22. . Divcss5:hover{cursor:pointer}
  24. Divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%; z-index:100; left:0; display: Block;}
  26. . divcss5:hover span{Display:block;position:absolute; bottom:0; Left:0;color: #FFF; width:554px; z-index:10;height : 36px; line-height:36px; Background: #000; Filter:alpha (opacity=60);-moz-opacity:0.5;opacity:0.5;}
  28. /* Set display text positioning position, background translucent */
  32. </style>
  34. </head>
  36. <body>
  40. <div class="divcss5" style="Background:url (imgexp.png)">
  42. <span> Text content </span>
  44. <a href="#" class="Now">&nbsp; </a>
  46. </div>
  50. <div class="divcss5" style="Background:url (imgexp.png)">
  52. <span> Welcome visit DIVCSS5 website </span >
  54. <a href= "http://www.divcss5.com/"  class= "Now" >&nbsp; </a> 
  56. </div>
  60. </body>
  62. </html>

This picture shows and hides the text content to be simple and practical, the program uses conveniently. In particular, we use the style property in the diameter of the label and background the background image to make the program good to use.

Pure Css+div realization of the mouse on the picture above the text content effect

http://www.divcss5.com/yanshi/2014/2014061902/

Http://www.divcss5.com/css-texiao/texiao714.shtml

DIV css mouse hover over picture to display text above the picture (go)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
get the permalink picture text fonts ellipse picture gopher picture xx picture flog picture picture minimizer

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More