{"id":26,"date":"2007-08-08T08:50:03","date_gmt":"2007-08-08T14:50:03","guid":{"rendered":"http:\/\/benblogged.com\/?p=26"},"modified":"2007-08-15T13:56:49","modified_gmt":"2007-08-15T19:56:49","slug":"css-alpha-hover-effect","status":"publish","type":"post","link":"http:\/\/benblogged.com\/?p=26","title":{"rendered":"CSS Alpha Hover Effect"},"content":{"rendered":"<p>Creating  a rollover image with css is not all that difficult to do.  Typically people will simply change the hover state or use the sliding door technique in order to avoid that in between flicker\u00e2\u20ac\u00a6but with just a simple bit of css code you can create a time saving and slick alternative!<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/benblogged.com\/wp-content\/uploads\/2007\/08\/alpha_css.jpg\" alt=\"alpha_css.jpg\" \/><\/p>\n<p><!--more--><\/p>\n<p><a href=\"http:\/\/www.benblogged.com\/tests\/hover.html\" target=\"blank\">Example<\/a><\/p>\n<p>Setting this up is very easy and you can apply this to specific elements or in this example all image links.  Our first step is to work out a little bit of xhtml.<\/p>\n<p>Create an image link or simply copy the code from my example but obviously change the file name (your_image.jpg) to match your jpg, gif, or png.<\/p>\n<p>Now its time to set up our css.  Note: you can change the numbers for more or less alpha.<\/p>\n<p>a img:hover {<br \/>\nfilter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;<br \/>\n}<\/p>\n<p>That\u00e2\u20ac\u2122s all there is to it \u00e2\u20ac\u00a6 the only problem is that it does not validate but works in many modern browsers.  If viewed in a browser that does not support the code the image will simply remain the same.  Well that\u00e2\u20ac\u2122s Ben Blogged!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a rollover image with css is not all that difficult to do. Typically people will simply change the hover state or use the sliding door technique in order to avoid that in between flicker\u00e2\u20ac\u00a6but with just a simple bit of css code you can create a time saving and slick alternative!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,8,7],"tags":[],"_links":{"self":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts\/26"}],"collection":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":0,"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts\/26\/revisions"}],"wp:attachment":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}