{"id":1167,"date":"2019-04-29T17:27:54","date_gmt":"2019-04-29T17:27:54","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1167"},"modified":"2019-04-29T17:27:54","modified_gmt":"2019-04-29T17:27:54","slug":"image-lightbox-in-pure-css","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/","title":{"rendered":"Image Lightbox In Pure CSS | Expand Image On Click"},"content":{"rendered":"<p><strong>How to create an image lightbox using CSS? You can easily create using this Image Lightbox In Pure CSS program.<\/strong><\/p>\n<p>Image <a href=\"https:\/\/en.wikipedia.org\/wiki\/Lightbox_(JavaScript)\" target=\"_blank\" rel=\"noopener noreferrer\">lightbox<\/a> is an <strong>overlay<\/strong> window that goes over the website and shows a picture. You must have seen these types of effect before on many websites. Now every website use <strong>image lightbox<\/strong>, In WordPress this is an inbuilt feature. Basically, this program is for showing an image&#8217;s actual size which is optimized on the webpage.<\/p>\n<p>Example: suppose an image size is 1200*1200, We can put this image on the website with its actual size. So, we can put an image with a small dimension, then the image&#8217;s size and quality become reduced. But using image lightbox when you will click on small size image there will appear window overlay with actual size image.<\/p>\n<p>Basically, these types of <strong>lightbox<\/strong> mostly built with <span><a href=\"https:\/\/webdevtrick.com\/web-development\/javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a><\/span>, jQuery or any other JS library. But today I will show you how we can create<strong> Image Lightbox in Pure CSS<\/strong>, without JavaScript. This program is very basic and easy to understand for beginners. This program is simple but its look not, see this preview given below how this Pure CSS Lightbox looks like.<\/p>\n<h3>Preview Of This Program<\/h3>\n<p>Let&#8217;s see this video preview to know how this program looks.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1167-1\" width=\"640\" height=\"302\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-pure-css.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-pure-css.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-pure-css.mp4<\/a><\/video><\/div>\n<p>Now you can see this program visually. If you like this then get the <strong>source code<\/strong> of it.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/css-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Image Gallery<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/animated-text-reveal-in-pure-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Reveal Text In Pure CSS<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/pure-css-tabs-responsive\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Tabs<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/popup-in-pure-css-and-html-get-example-with-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pure CSS Popup<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Image Lightbox In Pure CSS Source Code<\/h2>\n<p>As always, Before sharing source code I want to say something about this program. This <strong>Lightbox program<\/strong> is in <strong>Pure CSS<\/strong> and <strong>HTML<\/strong>.\u00a0 I created this program using a CSS <code>:target<\/code> command. Previously I shared some <span><a href=\"https:\/\/webdevtrick.com\/tag\/pure-css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pure CSS program<\/strong><\/a><\/span> you can see. Images in this program I upload in my website and put the link in the program.<\/p>\n<p>You have to create only 2 files for creating this program. One for <span><a href=\"https:\/\/webdevtrick.com\/web-design\/html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a><\/span>, One for <span><a href=\"https:\/\/webdevtrick.com\/web-design\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a><\/span>. Follow the steps to create this program without any error or trouble.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em>index.html<\/em>&#8216; and put these codes given here below.<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Image Light-Box in Pure CSS&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"&gt;\r\n\t\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n    &lt;h1&gt;Pure CSS Light-Box&lt;\/h1&gt;\r\n    &lt;p id=\"prova\"&gt;Click on any image to display the lightbox&lt;\/p&gt;\r\n\r\n    &lt;a href=\"#img1\"&gt;\r\n        &lt;img class=\"thumb\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample1.jpg\"&gt;\r\n    &lt;\/a&gt;\r\n    &lt;!-- first image box webdevtrick.com --&gt;\r\n    &lt;div class=\"lightbox\" id=\"img1\"&gt;\r\n        &lt;a href=\"#img3\" class=\"light-btn btn-prev\"&gt;prev&lt;\/a&gt;\r\n            &lt;a href=\"#_\" class=\"btn-close\"&gt;X&lt;\/a&gt;\r\n            &lt;img src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample1.jpg\"&gt;\r\n        &lt;a href=\"#img2\" class=\"light-btn btn-next\"&gt;next&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;a href=\"#img2\"&gt;\r\n      &lt;img class=\"thumb\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample2.jpg\"&gt;\r\n    &lt;\/a&gt;\r\n    &lt;!-- second image box webdevtrick.com --&gt;\r\n    &lt;div class=\"lightbox\" id=\"img2\"&gt;\r\n        &lt;a href=\"#img1\" class=\"light-btn btn-prev\"&gt;prev&lt;\/a&gt;\r\n            &lt;a href=\"#_\" class=\"btn-close\"&gt;X&lt;\/a&gt;\r\n            &lt;img src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample2.jpg\"&gt;\r\n        &lt;a href=\"#img3\" class=\"light-btn btn-next\"&gt;next&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;a href=\"#img3\"&gt;\r\n      &lt;img class=\"thumb\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample3.jpg\"&gt;\r\n    &lt;\/a&gt;\r\n    &lt;!-- third image box webdevtrick.com --&gt;\r\n    &lt;div class=\"lightbox\" id=\"img3\"&gt;\r\n        &lt;a href=\"#img2\" class=\"light-btn btn-prev\"&gt;prev&lt;\/a&gt;\r\n            &lt;a href=\"#_\" class=\"btn-close\"&gt;X&lt;\/a&gt;\r\n            &lt;img src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/b47sample3.jpg\"&gt;\r\n        &lt;a href=\"#img1\" class=\"light-btn btn-next\"&gt;next&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;p class=\"footer\"&gt;Code By &lt;a href=\"https:\/\/webdevtrick.com\"&gt;Webdevtrick.com&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em>style.css<\/em>&#8216; and put these codes.<\/p>\n<pre class=\"lang:css decode:true\" title=\"style.css\">\/* code by webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\nhtml, body {\r\n    font-family: arial;\r\n    padding: 0 2em;\r\n    font-size: 18px;\r\n    background: #111;\r\n    color: #aaa;\r\n    text-align:center;\r\n\tmargin-top: 50px;;\r\n}\r\nh1 {\r\n    font-size: 3em;\r\n    font-weight: 100;\r\n\tcolor: white;\r\n}\r\np {\r\n    font-weight: 100;\r\n    color: #888;\r\n    margin-bottom: 45px;\r\n}\r\n.footer { \r\n    margin-top: 80px;\r\n}\r\n.footer a {\r\n\ttext-decoration: none;\r\n\tfont-weight: 900;\r\n\tcolor: #56ADFF;\r\n}\r\na {\r\n    text-decoration: none;\r\n}\r\n\r\n.thumb {\r\n    max-height: 171px;\r\n    border: solid 6px white;\r\n}\r\n.lightbox {\r\n    position: fixed;\r\n    z-index: 999;\r\n    height: 0;\r\n    width: 0;\r\n    text-align: center;\r\n    top: 0;\r\n    left: 0;\r\n    background: rgba(0, 0, 0, 0.8);\r\n    opacity: 0;\r\n}\r\n.lightbox img {\r\n    max-width: 90%;\r\n    max-height: 80%;\r\n    margin-top: 2%;\r\n    opacity: 0;\r\n}\r\n.lightbox:target {\r\n    outline: none;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 1 !important;\r\n    \r\n}\r\n.lightbox:target img {\r\n    border: solid 17px white;\r\n    opacity: 1;\r\n    webkit-transition: opacity 0.6s;\r\n    transition: opacity 0.6s;\r\n}\r\n.light-btn {\r\n    color: #fafafa;\r\n    background-color: #333;\r\n    border: solid 3px white;\r\n    padding: 5px 15px;\r\n    border-radius: 1px;\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    vertical-align: middle;\r\n    position: absolute;\r\n    top: 45%;\r\n    z-index: 99;\r\n}\r\n.light-btn:hover {\r\n    background-color: #111;\r\n}\r\n.btn-prev {\r\n    left: 7%;\r\n}\r\n.btn-next {\r\n    right: 7%;\r\n}\r\n.btn-close {\r\n    position: absolute;\r\n    right: 2%;\r\n    top: 2%;\r\n    color: #fafafa;\r\n    background-color: red;\r\n    border: solid 5px white;\r\n    padding: 10px 15px;\r\n    border-radius: 1px;\r\n    text-decoration: none;\r\n}\r\n.btn-close:hover {\r\n    background-color: #740404;\r\n}<\/pre>\n<p>That&#8217;s It. Now you have successfully created Image Lightbox In Pure CSS program. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create an image lightbox using CSS? You can easily create using this Image Lightbox In Pure CSS program. Image lightbox is an overlay window that goes over the website and shows a picture. You must have seen these types of effect before on many websites. Now every website use image lightbox, In WordPress [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,22,41],"tags":[74,70,155,68,171,154,67],"class_list":["post-1167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-web-design","category-web-development","tag-css-animation","tag-css-tips","tag-html-and-css","tag-html-source-code","tag-image-lightbox","tag-pure-css","tag-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Image Lightbox In Pure CSS | Expand Image On Click<\/title>\n<meta name=\"description\" content=\"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Lightbox In Pure CSS | Expand Image On Click\" \/>\n<meta property=\"og:description\" content=\"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T17:27:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Image Lightbox In Pure CSS | Expand Image On Click\",\"datePublished\":\"2019-04-29T17:27:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\"},\"wordCount\":425,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg\",\"keywords\":[\"css animation\",\"css tips\",\"html and css\",\"html source code\",\"image lightbox\",\"pure css\",\"source code\"],\"articleSection\":[\"CSS\",\"HTML\",\"Web Design\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\",\"url\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\",\"name\":\"Image Lightbox In Pure CSS | Expand Image On Click\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg\",\"datePublished\":\"2019-04-29T17:27:54+00:00\",\"description\":\"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg\",\"width\":1200,\"height\":629,\"caption\":\"image lightbox in pure css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Lightbox In Pure CSS | Expand Image On Click\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Lightbox In Pure CSS | Expand Image On Click","description":"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.","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":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/","og_locale":"en_US","og_type":"article","og_title":"Image Lightbox In Pure CSS | Expand Image On Click","og_description":"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.","og_url":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-04-29T17:27:54+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Image Lightbox In Pure CSS | Expand Image On Click","datePublished":"2019-04-29T17:27:54+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/"},"wordCount":425,"commentCount":2,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg","keywords":["css animation","css tips","html and css","html source code","image lightbox","pure css","source code"],"articleSection":["CSS","HTML","Web Design","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/","url":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/","name":"Image Lightbox In Pure CSS | Expand Image On Click","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg","datePublished":"2019-04-29T17:27:54+00:00","description":"Trying to create an overlay lightbox? Get the source code of Image Lightbox In Pure CSS program. It helps you create an image overlay window.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/image-lightbox-in-pure-css.jpg","width":1200,"height":629,"caption":"image lightbox in pure css"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/image-lightbox-in-pure-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Image Lightbox In Pure CSS | Expand Image On Click"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1167"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1172"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}