{"id":1930,"date":"2014-12-23T08:31:47","date_gmt":"2014-12-23T08:31:47","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=1930"},"modified":"2014-12-27T12:52:01","modified_gmt":"2014-12-27T12:52:01","slug":"css3-thumbnail-image-hover-effect-example","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/","title":{"rendered":"CSS3 thumbnail image hover effect example"},"content":{"rendered":"<p>Here is a cool CSS3 hover effects tutorial which use only pure CSS and without JavaScript. You can use it in your website web apps to enhance user experience and interactivity. Below is the source code which used to build the tutorial and at bottom there is an option to view live demo of the tutorial.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\tul.zoom{\r\n\t\twidth:85%;\r\n\t\theight:auto;\r\n\t\tmargin: 0 auto;\r\n\t\tlist-style-type:none; \r\n\t}\r\n\tul.zoom li{\r\n\t\tdisplay:inline-block; \r\n\t\tposition: relative;\r\n\t\tz-index: 0; \r\n\t\tmargin:10px 40px 0 20px;\r\n\t}\r\n\tul.zoom img{\r\n\t\tbackground-color:#fff;\r\n\t\tpadding: 6px;\r\n\t\tbox-shadow: 0 0 6px rgba(0, 0, 0, .45);\r\n\t\tborder-radius: 4px; \r\n\t}\r\n\tul.zoom span{\r\n\t\tposition:absolute;\r\n\t\tleft: -9999px;\r\n\t\tbackground-color:#fff;\r\n\t\tpadding: 10px;\r\n\t\tcolor: #495a62; \r\n\t\tbox-shadow: 0 0 6px rgba(0, 0, 0, .45);\r\n\t\tborder-radius: 4px; \r\n\t}\r\n\tul.zoom li:hover{\r\n\t\tz-index: 50;\r\n\t\tcursor:pointer;\r\n\t}\r\n\tul.zoom span img{\r\n\t\tpadding:2px;\r\n\t\tbackground:#ccc;\r\n\t}\r\n\tul.zoom li:hover span{ \r\n\t\ttop: -80px; \r\n\t\tleft: -10px; \r\n\t}\r\n\tul.zoom li:hover:nth-child(2) span{\r\n\t\tleft: -100px; \r\n\t}\r\n\tul.zoom li:hover:nth-child(3) span{\r\n\t\tleft: -200px; \r\n\t}\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t<!--Zoom UNORDERED LIST-->\r\n\t\t<ul class=\"zoom\"> \r\n\t\t\r\n\t\t\t<!--First Image-->\r\n\t\t\t<li>\r\n\t\t\t\t<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/vishmax.com\/demos\/images\/small_01.jpg\" width=\"150\" height=\"100\" alt=\"\" \/>\r\n\t\t\t\t<span>\r\n\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/large_01.jpg\"  alt=\"\" \/> \r\n\t\t\t\t\t<br \/>\r\n\t\t\t\t\tSunflowers are beautiful \r\n\t\t\t\t<\/span>\r\n\t\t\t<\/li>\r\n\r\n\t\t\t<!--Second Image-->\r\n\t\t\t<li>\r\n\t\t\t\t<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/vishmax.com\/demos\/images\/small_02.jpg\" width=\"150\" height=\"100\" alt=\"\" \/>\r\n\t\t\t\t<span>\r\n\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/large_02.jpg\"  alt=\"\" \/> \r\n\t\t\t\t\t<br \/>\r\n\t\t\t\t\tSunflowers are beautiful \r\n\t\t\t\t<\/span>\r\n\t\t\t<\/li>\r\n\r\n\t\t\t<!--Third Image-->\r\n\t\t\t<li>\r\n\t\t\t\t<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/vishmax.com\/demos\/images\/small_03.jpg\" width=\"150\" height=\"100\" alt=\"\" \/>\r\n\t\t\t\t<span>\r\n\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/large_03.jpg\"  alt=\"\" \/> \r\n\t\t\t\t\t<br \/>\r\n\t\t\t\t\tSunflowers are beautiful \r\n\t\t\t\t<\/span>\r\n\t\t\t<\/li>\r\n\r\n\t\t\t<!--Fourth Image-->\r\n\t\t\t<li>\r\n\t\t\t\t<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/vishmax.com\/demos\/images\/small_04.jpg\" width=\"150\" height=\"100\" alt=\"\" \/>\r\n\t\t\t\t<span>\r\n\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/large_04.jpg\"  alt=\"\" \/> \r\n\t\t\t\t\t<br \/>\r\n\t\t\t\t\tSunflowers are beautiful \r\n\t\t\t\t<\/span>\r\n\t\t\t<\/li>\r\n\r\n\t\t<\/ul>\r\n\t\t<!--.\/ Zoom UNORDERED LIST-->\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css-hover-effect.html\" target=\"_blank\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a cool CSS3 hover effects tutorial which use only pure CSS and without JavaScript. You can use it in your website web apps to enhance user experience and interactivity. Below is the source code which used to build the tutorial and at bottom there is an option to view live demo of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,101,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 thumbnail image hover effect example - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 thumbnail image hover effect example - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is a cool CSS3 hover effects tutorial which use only pure CSS and without JavaScript. You can use it in your website web apps to enhance user experience and interactivity. Below is the source code which used to build the tutorial and at bottom there is an option to view live demo of the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-23T08:31:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-27T12:52:01+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/vishmax.com\/demos\/images\/small_01.jpg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"CSS3 thumbnail image hover effect example\",\"datePublished\":\"2014-12-23T08:31:47+00:00\",\"dateModified\":\"2014-12-27T12:52:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\"},\"wordCount\":65,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\",\"name\":\"CSS3 thumbnail image hover effect example - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-23T08:31:47+00:00\",\"dateModified\":\"2014-12-27T12:52:01+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 thumbnail image hover effect example\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 thumbnail image hover effect example - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 thumbnail image hover effect example - Vishmax.com","og_description":"Here is a cool CSS3 hover effects tutorial which use only pure CSS and without JavaScript. You can use it in your website web apps to enhance user experience and interactivity. Below is the source code which used to build the tutorial and at bottom there is an option to view live demo of the [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-23T08:31:47+00:00","article_modified_time":"2014-12-27T12:52:01+00:00","og_image":[{"url":"http:\/\/vishmax.com\/demos\/images\/small_01.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"CSS3 thumbnail image hover effect example","datePublished":"2014-12-23T08:31:47+00:00","dateModified":"2014-12-27T12:52:01+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/"},"wordCount":65,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/","url":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/","name":"CSS3 thumbnail image hover effect example - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-23T08:31:47+00:00","dateModified":"2014-12-27T12:52:01+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/css3-thumbnail-image-hover-effect-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS3 thumbnail image hover effect example"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1930"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}