{"id":9950,"date":"2024-03-03T10:31:00","date_gmt":"2024-03-03T10:31:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9950"},"modified":"2024-03-04T08:31:08","modified_gmt":"2024-03-04T03:31:08","slug":"slide-image-on-hover-using-a-css-transition","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/","title":{"rendered":"Slide Image on Hover Using a CSS Transition"},"content":{"rendered":"

This code enables the “Slide Image on Hover Using a CSS Transition” effect. The images smoothly shift on hover, revealing additional information below. This functionality is helpful for creating interactive and visually appealing image displays on websites. The code utilizes CSS transitions to smoothly animate the sliding motion, enhancing the user experience.<\/p>\n

How to Slide Image On Hover Using a CSS Transition<\/h2>\n

1. First of all, make sure to include the necessary libraries (Modernizr JS<\/a> and Normalize CSS<\/a>) by adding the following code within the <head><\/code> tags of your HTML file.<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.min.js\" type=\"text\/javascript\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"><\/pre>\n
2. Insert the following HTML code into the body of your document, adjusting image sources and content as needed.<\/p>\n
<div id=\"slidingWindow\" ontouchstart=\"\">\r\n  <div class=\"slidingSection\"><img src=\"https:\/\/source.unsplash.com\/200x200\/?girl\" \/>\r\n    <p>Image Info<\/p><\/div>\r\n  <div class=\"slidingSection\"><img src=\"https:\/\/source.unsplash.com\/200x200\/?cat\" \/>\r\n  <p>Other Image Info<\/p><\/div>\r\n<\/div><\/pre>\n
3. Now, copy and paste the following CSS code into your stylesheet or within a <style><\/code> tag in the document’s head.<\/p>\n
The magic happens in the CSS section named .slidingSection<\/code>. This class defines the sliding behavior on hover. The transform<\/code> property is responsible for the horizontal translation, creating a smooth sliding effect. Feel free to tweak the values for a faster or slower transition.<\/p>\n
#slidingWindow {\r\n  display: flex;\r\n  margin: 1em 4em;\r\n  overflow: hidden;\r\n  width: 210px;\r\n  height: 250px;\r\n  border: 1px solid #9f8e60;\r\n  background-image: url('data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2YzI1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYTI0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');\r\n  background-size: 100%;\r\n  background-image: linear-gradient(to bottom, #d6c25c, #b3a24d);\r\n  box-shadow: 0 2px 3px rgba(31, 31, 31, 0.8);\r\n}\r\n\r\n#slidingWindow,\r\n.slidingSection,\r\nimg {\r\n  border-radius: 2px;\r\n}\r\n\r\n.slidingSection {\r\n  margin: 4px;\r\n  background-image: url('data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNkZWUwOWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NDgxMzEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');\r\n  background-size: 100%;\r\n  background-image: linear-gradient(to bottom, #dee09e 60%, #648131);\r\n  width: 200px;\r\n  min-width: 200px;\r\n  height: 240px;\r\n  text-align: center;\r\n  border: 1px solid #a98e70;\r\n  transform: translate3d(0, 0, 0);\r\n  transition: transform 450ms linear;\r\n}\r\n\r\n#slidingWindow:hover > .slidingSection {\r\n  transform: translate3d(-210px, 0, 0);\r\n  transition: transform 450ms linear;\r\n}\r\n\r\nimg {\r\n  display: block;\r\n  width: 200px;\r\n  height: 200px;\r\n  border: 0;\r\n  outline: 0;\r\n  vertical-align: middle;\r\n  box-shadow: 0 1px 0 rgba(64, 64, 64, 0.4);\r\n}\r\n\r\np {\r\n  position: relative;\r\n  margin-top: 0.65em;\r\n  font-family: sans-serif;\r\n  text-shadow: 0 1px 0 #c9c29c;\r\n}\r\n\r\nbody {\r\n  min-height: 100%;\r\n  background: #f5cfa3;\r\n}<\/pre>\n
Adjust the styles, image sources, and content according to your preferences. You can modify the dimensions, colors, and transition duration to match your website’s design.<\/p>\n
That’s all! hopefully, you have successfully created a feature to slide images on hover using the transition property in CSS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code enables the “Slide Image on Hover Using a CSS Transition” effect. The images smoothly shift on hover, revealing…<\/p>\n","protected":false},"author":1,"featured_media":9955,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[79],"class_list":["post-9950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-slider"],"acf":[],"yoast_head":"\nSlide Image on Hover Using a CSS Transition — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. 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\/slide-image-on-hover-using-a-css-transition\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slide Image on Hover Using a CSS Transition — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\" \/>\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-03T10:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T03:31:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.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\/slide-image-on-hover-using-a-css-transition\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Slide Image on Hover Using a CSS Transition\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\"},\"wordCount\":235,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png\",\"keywords\":[\"Image Sliders\"],\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\",\"name\":\"Slide Image on Hover Using a CSS Transition — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:08+00:00\",\"description\":\"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png\",\"width\":1280,\"height\":960,\"caption\":\"Slide Image on Hover Using a CSS Transition\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#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\":\"Slide Image on Hover Using a CSS Transition\"}]},{\"@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":"Slide Image on Hover Using a CSS Transition — CodeHim","description":"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. 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\/slide-image-on-hover-using-a-css-transition\/","og_locale":"en_US","og_type":"article","og_title":"Slide Image on Hover Using a CSS Transition — CodeHim","og_description":"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-03T10:31:00+00:00","article_modified_time":"2024-03-04T03:31:08+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.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\/slide-image-on-hover-using-a-css-transition\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Slide Image on Hover Using a CSS Transition","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:08+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/"},"wordCount":235,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png","keywords":["Image Sliders"],"articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/","url":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/","name":"Slide Image on Hover Using a CSS Transition — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:08+00:00","description":"Here is a free code snippet to create a Slide Image on Hover Using a CSS Transition. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Slide-Image-on-Hover-Using-a-CSS-Transition.png","width":1280,"height":960,"caption":"Slide Image on Hover Using a CSS Transition"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/slide-image-on-hover-using-a-css-transition\/#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":"Slide Image on Hover Using a CSS Transition"}]},{"@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":1728,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9950","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=9950"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9950\/revisions"}],"predecessor-version":[{"id":11310,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9950\/revisions\/11310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9955"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}