{"id":9932,"date":"2024-03-04T10:30:00","date_gmt":"2024-03-04T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9932"},"modified":"2024-03-04T08:31:00","modified_gmt":"2024-03-04T03:31:00","slug":"image-frame-in-html-and-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/","title":{"rendered":"Image Frame in HTML and CSS"},"content":{"rendered":"

This HTML and CSS code snippet helps you to create stylish image frame on a webpage. It styles images inside figure tags, adding decorative frames. The CSS defines the frame’s appearance and sizing. This helps enhance image presentation on webpages.<\/p>\n

You can use this code in web projects to showcase images attractively. It adds decorative frames, enhancing visual appeal. This can elevate the presentation of photo galleries<\/a> or product showcases on websites.<\/p>\n

How to Create Image Frames in HTML and CSS<\/h2>\n

1. Start by copying the following HTML code. Place your image URLs inside the <img><\/code> tags, and customize the <figcaption><\/code> text to suit your content. Repeat the <figure><\/code> section for each image you want to showcase.<\/p>\n

<figure>\r\n  <img src=\"https:\/\/assets.codepen.io\/1506195\/portrait-woman-unsplash.jpg\" \/>\r\n  <figcaption>Test<\/figcaption>\r\n<\/figure>\r\n\r\n<figure>\r\n  <img src=\"https:\/\/assets.codepen.io\/1506195\/portrait-woman-unsplash.jpg\" \/>\r\n  <figcaption>Test<\/figcaption>\r\n<\/figure>\r\n\r\n<figure>\r\n  <img src=\"https:\/\/assets.codepen.io\/1506195\/portrait-woman-unsplash.jpg\" \/>\r\n  <figcaption>Test<\/figcaption>\r\n<\/figure><\/pre>\n
2. Now, copy the following CSS into your stylesheet or HTML file within <style><\/code> tags. Adjust the CSS variables in the figure<\/code> selector to alter the frame’s size and appearance. Modify the background<\/code> property to change frame colors or gradients.<\/p>\n
figure {\r\n  --c: 50px;\r\n  --p: 30px;\r\n  --d: 10px;\r\n  background: red;\r\n  display: inline-block;\r\n  padding: var(--p);\r\n  background:\r\n    radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 \/ var(--c) var(--c),\r\n    radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% \/ var(--c) var(--c),\r\n    linear-gradient(#fff 0 0) 50% 50% \/ calc(100% - var(--p)) calc(100% - var(--p)),\r\n    linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% \/ calc(100% - var(--p)) calc(100% - var(--d)),\r\n    linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% \/ calc(100% - var(--d)) calc(100% - var(--p)),\r\n    radial-gradient(farthest-side at 0 100%, #00000018, #0000) calc(100% - var(--d) * 0.5) calc(var(--d) * 0.5) \/ var(--d) var(--d),\r\n    radial-gradient(farthest-side at 100% 0, #00000018, #0000) calc(var(--d) * 0.5) calc(100% - var(--d) * 0.5) \/ var(--d) var(--d)\r\n    ;\r\n  background-repeat: no-repeat;\r\n  clip-path: polygon(0 var(--c), var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);\r\n}\r\n\r\n\/* demo *\/\r\nfigure:nth-of-type(1) img {\r\n  width: 300px;\r\n}\r\n\r\nfigure:nth-of-type(2) img {\r\n  width: 300px;\r\n  height: 200px;\r\n}\r\n\r\nfigure:nth-of-type(3) img {\r\n  width: 300px;\r\n  aspect-ratio: 1;\r\n}\r\n\r\nbody {\r\n  background: \r\n    repeating-linear-gradient(30deg, #fff2 0 10%, #fff0 0 24%),\r\n    repeating-linear-gradient(-23deg, #fff2 0 4%, #fff0 0 14%)\r\n    gold !important;\r\n}\r\n\r\nimg {\r\n  object-fit: cover;\r\n}<\/pre>\n
The CSS code targets the <figure><\/code> elements, so ensure your image frames are enclosed within these tags. Optionally, adjust the demo styling at the end of the CSS to fit your specific image dimensions. Apply specific styles to individual images by using figure:nth-of-type(n) img<\/code> selectors, adjusting widths, heights, or aspect ratios as needed.<\/p>\n
That’s all! hopefully, you have successfully created an Image Frame In HTML and CSS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML and CSS code snippet helps you to create stylish image frame on a webpage. It styles images inside…<\/p>\n","protected":false},"author":1,"featured_media":9941,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-9932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nImage Frame in HTML and CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Frame in HTML and CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T10:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\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\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Image Frame in HTML and CSS\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\"},\"wordCount\":234,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\",\"name\":\"Image Frame in HTML and CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"description\":\"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Image Frame in HTML and CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Frame in HTML and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Frame in HTML and CSS — CodeHim","description":"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/","og_locale":"en_US","og_type":"article","og_title":"Image Frame in HTML and CSS — CodeHim","og_description":"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-04T10:30:00+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Image Frame in HTML and CSS","datePublished":"2024-03-04T10:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/"},"wordCount":234,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/","url":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/","name":"Image Frame in HTML and CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png","datePublished":"2024-03-04T10:30:00+00:00","description":"Here is a free code snippet to create a Image Frame in HTML and CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Image-Frame-in-HTML-and-CSS.png","width":1280,"height":960,"caption":"Image Frame in HTML and CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/image-frame-in-html-and-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Image Frame in HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2276,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9932"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9932\/revisions"}],"predecessor-version":[{"id":11304,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9932\/revisions\/11304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9941"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}