{"id":2999,"date":"2016-07-05T09:39:19","date_gmt":"2016-07-05T14:39:19","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1868"},"modified":"2016-07-05T09:39:19","modified_gmt":"2016-07-05T14:39:19","slug":"using-css3s-opacity-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-css3s-opacity-property\/","title":{"rendered":"Using CSS3’s Opacity Property"},"content":{"rendered":"

With CSS, any HTML element can become (slightly or completely) transparent. The opacity property controls how opaque an element is, and it takes values between 0 and 1. So if you have an image that you want to be slightly transparent, all you need to do is determine how transparent you want it to be and apply a value between 0 (completely transparent) and 1 (completely opaque) using the opacity property, like this:<\/p>\n

\"Screen<\/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. img{<\/span><\/div><\/li>\n
  2. opacity:<\/span> .6;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    As you can see, after the opacity is defined as .6, the image has become much more transparent. A common (and cool)\u00a0use for this property is when creating hover effects. Having an image become slightly opaque on hover is a common design trend that is easy to apply using the opacity property.<\/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. img:hover<\/span>{<\/span><\/div><\/li>\n
    2. opacity:<\/span> .6;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\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 CSS, any HTML element can become (slightly or completely) transparent. The opacity property controls how opaque an element is, and it takes values between 0 and 1. So if you have an image that you want to be slightly […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2999"}],"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=2999"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2999\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2748"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}