{"id":2994,"date":"2015-10-22T12:06:06","date_gmt":"2015-10-22T17:06:06","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1752"},"modified":"2015-10-22T12:06:06","modified_gmt":"2015-10-22T17:06:06","slug":"quick-tip-how-to-use-css3-to-create-a-fade-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-how-to-use-css3-to-create-a-fade-effect\/","title":{"rendered":"Quick Tip: How to Use CSS3 to Create a Fade Effect"},"content":{"rendered":"

With CSS3’s webkit transition property and opacity properties, it’s easy to duplicate the effects of JavaScript and jQuery with CSS.<\/p>\n

Insert this code into the body of your html:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>div id=&quot;<\/span>fade&quot;&gt;<\/span>Hover over this text to see it fade away&lt;<\/span>\/div&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    This css code will make the entire #fade<\/strong> div fade out to nothing when it’s hovered upon:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. #fade<\/span>{<\/span><\/div><\/li>\n
    2.   opacity:<\/span> 1<\/span>;<\/span><\/div><\/li>\n
    3.   -webkit-transition:<\/span> opacity 1s linear;<\/span><\/div><\/li>\n
    4. }<\/span><\/div><\/li>\n
    5. #fade<\/span>:hover<\/span>{<\/span><\/div><\/li>\n
    6.   opacity:<\/span> 0<\/span>;<\/span><\/div><\/li>\n
    7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      By\u00a0defining the parameters of the\u00a0-webkit-transition<\/strong> property to opacity 1s linear\u00a0<\/strong>we are defining which property is going to transition (opacity), for how long (1s) and whether or not the transition is going to change speed throughout the duration (linear). The simplicity of this code makes CSS3 a real rival to jQuery in terms of creating this sort of fade effect.<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      With CSS3’s webkit transition property and opacity properties, it’s easy to duplicate the effects of JavaScript and jQuery with CSS.<\/p>\n

      Insert this code into the body of your html:<\/p>\n

      \t\t\t\t\t\t< View plain text ><\/p>\n

      \t\tHTML<\/p>\n

      \t\t&lt;div id=&quot;fade&quot;&gt;Hover over this text to see it fade […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,192,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2994"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2994"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2994\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}