A very practical mouse hover Effect Based on css3, css3 is very practical
Today we bring you a very practical mouse hover Effect Based on css3. This special effect is a translucent mask layer when the mouse passes down. It works well and is implemented in pure css3, with few codes and is very practical. The effect is as follows:
Download Online Preview source code
Implementation Code:
Html code:
<div align="center" style="position: relative;"> <div class="contener"> <div class="txt_init"> LOW POLY BACKGROUND</div> <div class="opac"> Download</div> </div> </div>
Css3 code:
.contener{ width:310px; height:140px; background-image:url(fond.png); overflow: hidden; cursor: pointer; position:relative;}.txt_init{ position: absolute; bottom: 5px; right: 5px; font-family: 'Roboto'; font-size: 22px; color: #ffffff; font-weight: 500;}.opac{ opacity: 0;}.contener:hover .opac{ width:310px; position: absolute; z-index: 1; font-family: 'Roboto'; font-size: 25px; color: #ffffff; font-weight: 300; line-height: 140px; height:140px; opacity: 1; background-color: rgba(0,0,0,0.7); -webkit-animation:oblik 0.4s ease-in; -webkit-transform-origin: 0% 100%; -moz-animation:oblik 0.4s ease-in; -moz-transform-origin: 0% 100%; -ms-animation:oblik 0.4s ease-in; -ms-transform-origin: 0% 100%; animation:oblik 0.4s ease-in; transform-origin: 0% 100%; }@-webkit-keyframes oblik { 0% {opacity:0;-webkit-transform: rotate(-45deg);} 100% {opacity:1;-webkit-transform: rotate(0deg);} }@-moz-keyframes oblik { 0% {opacity:0;-moz-transform: rotate(-45deg);} 100% {opacity:1;-moz-transform: rotate(0deg);} }@-ms-keyframes oblik { 0% {opacity:0;-ms-transform: rotate(-45deg);} 100% {opacity:1;-ms-transform: rotate(0deg);} }@keyframes oblik { 0% {opacity:0;transform: rotate(-45deg);} 100% {opacity:1;transform: rotate(0deg);} }
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/9986
The standard writing method is the hover pseudo class (CSS3 syntax, which is not supported by the IE8 kernel), but not to a, but to its parent element.
For example, your html structure is:
<Ul> <li> <span> Test 1 </span> <a href = "#"> Test 1 </a> </li> <span> Test 1 </span> <a href = "#"> Test 1 </a> </li> <span> Test 1 </span> <a href =" # "> Test 1 </a> </li> <span> Test 1 </span> <a href =" # "> Test 1 </a> </li> </ul>, the corresponding css is:
Ul li a {}/* default status */ul li: hover a {display: none;}/* default status */[double/double row] Text (Link) in the preceding example) block, the li element must be given relative location (relative), and the span and a must be given to display: inline-block, which is a block element. By default, span is hidden, hide a in the hover state.
You can also use js or jq to control the name of the li selector, for example, li. hover. Or write the onMouse event directly in li.
How to Implement the hover effect (CODE) in css ),
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> hover over </title>
<Style>
Body {margin: 0; padding: 0; font-size: 12px; font-family: Microsoft Yahei ;}
Ul, li {margin: 0; padding: 0; list-style-type: none ;}
# Item_info {}
# Item_info. tab {background: # f3f3f3; height: 29px; overflow: hidden ;}
# Item_info. tab ul {width: 1000px; height: 28px; margin: 0 auto ;}
# Item_info. tab li {float: left; height: 28px; line-height: 28px ;}
# Item_info. tab li a {display: inline-block; padding: 0px 20px; height: 28px; line-height: 28px; text-decoration: none; background: url (.. /images/tab_off.gif) repeat-x; color: #666; font-size: 12px; text-align: center; border-right: 1px solid # ddd; border-bottom: 1px solid # ddd ;}
# Item_info. tab li. on {background: # fff; font-weight: bold; text-decoration: none; color: #333; border-bottom: 1px solid # fff ;}
# Item_info. tab li a. null {border-right: 1px solid # ddd; border-bottom: 1px solid # fff; width: 0px; padding: 0; overflow: hidden ;}
# Item_info. info {margin: 0 auto; width: 1000px ;}
# Item _... the remaining full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
