{"id":754,"date":"2017-03-28T15:51:33","date_gmt":"2017-03-28T15:51:33","guid":{"rendered":"http:\/\/blog.azoora.com\/?p=754"},"modified":"2017-10-26T08:12:59","modified_gmt":"2017-10-26T08:12:59","slug":"image-comparison-slider-with-css3-and-jquery","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/image-comparison-slider-with-css3-and-jquery\/","title":{"rendered":"Image Comparison Slider with CSS3 and jQuery"},"content":{"rendered":"<p><a title=\"Image Comparison Slider\" href=\"http:\/\/codyhouse.co\/gem\/css-jquery-image-comparison-slider\/\" target=\"_blank\" rel=\"noopener\">Image Comparison Slider<\/a><strong>\u00a0is a handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.<\/strong>\u00a0When you create a product page, there are some effective UX solutions that can be used to make the user \u2018feel\u2019 the product.<\/p>\n<p>A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display resolution and a standard one. Google uses it to show how cool is a Google+ Photos filter.<\/p>\n<blockquote><p>Requirements: CSS3 and jQuery Framework<br \/>\nDemo:\u00a0<a title=\"demo\" href=\"http:\/\/codyhouse.co\/demo\/image-comparison-slider\/index.html\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/codyhouse.co\/demo\/image-comparison-slider\/index.html<\/a><br \/>\nLicense: License Free<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Image Comparison Slider\u00a0is a handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.\u00a0When you create a product page, there are some effective UX solutions that can be used to make the user \u2018feel\u2019 the product. A comparison image slider is one of those. If you look at the Sony Ultra HD [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":757,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[66,16],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2017\/08\/image-comparison.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-ca","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/754"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=754"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions\/756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/757"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}