{"id":5133,"date":"2015-06-29T12:15:33","date_gmt":"2015-06-29T09:15:33","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5133"},"modified":"2018-01-08T14:32:50","modified_gmt":"2018-01-08T12:32:50","slug":"css-hover-effects-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/","title":{"rendered":"CSS Hover Effects Example"},"content":{"rendered":"

In this example, we will go through performing hover effects on CSS.<\/p>\n

You see hover effects on almost every webpage nowadays, it seems to be a good way to make elements eye-catching and enhance usability.<\/p>\n

In a more functional note, it lets you know that (in most cases) something is clickable, like a link, an image or anything else.<\/p>\n

The application is generally easy, and it is compatible with all modern browsers like Chrome, Firefox, Safari, Opera etc.<\/p>\n

Lets first see how we can apply basic hover effects and then expand to more advanced usage with cases and examples.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Setup & Application <\/h2>\n

First, go ahead and create a blank html document and then add the basic syntax inside like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Hover Effects Example<\/title>\r\n<\/head>\r\n<body>\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\r\n<\/pre>\n
To apply hover effects, you add :hover<\/code> after the tag or class of html and then open the brackets:<\/p>\n
-HTML (create an element, i.e a button, so that we can apply hover)<\/p>\n
\r\n<button>This is me<\/button>\r\n<\/pre>\n
-CSS (respect the syntax class\/tag:hover { attributtes }<\/code> to apply hover effect)<\/p>\n
\r\n<style type=\"text\/css\">\r\nbutton:hover {\r\n\tbackground-color: red;\r\n\tcolor: white;\r\n}\r\n<\/style>\r\n<\/pre>\n
We expect this button to change background color to red and text color to white when the mouse is over it:
\n
\"Hover<\/a>
Hover on Button – Basic Application<\/figcaption><\/figure>
\nSo that is the most basic application of hover in a button, but there are more examples and elements that you can apply it.<\/p>\n
2. Cases and Examples <\/h2>\n
Below, we will take elements of html, style them and give different hover effects to show examples.<\/p>\n
2.1 Button Hover Effects<\/h3>\n
There are three most important aspects you should remember when stlying buttons with hovers:<\/p>\n
1. Choose a light bg color on normal state and a deeper bg color on hover state or vice versa, that will look great.<\/p>\n
2. Be careful to notice how the text inside the button looks like while on hover. If not right, change its color.<\/p>\n
3. Always add a transition property with a value of .5s to make the hover effect animate (fade) beautifully.<\/p>\n
Below, I have added three buttons on the HTML section, those will have the same styling but different hovers.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<button class=\"btn1\">button 1<\/button>\r\n<button class=\"btn2\">button 2<\/button>\r\n<button class=\"btn3\">button 3<\/button>\r\n<\/pre>\n
Now notice that I have given same styling by selecting the button<\/code> tag and different hovers using the respective classes:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\nbutton {\r\n\twidth: 8em;\r\n\theight: 3em;\r\n\tborder: none;\r\n\tborder-radius: 0.5em;\r\n\tbackground-color: #919191;\r\n\tfont-family: \"Montserrat\";\r\n\ttext-transform: uppercase;\r\n\tcolor: white;\r\n\tmargin-right: 2em;\r\n\ttransition: .5s;\r\n}\r\n\r\n.btn1:hover {\r\n\tbackground-color:#8a3f3f;\t\/* deep red color *\/\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.btn2:hover {\r\n\tbackground-color: transparent; \/* no background color *\/\r\n\ttext-transform: lowercase;\r\n\tborder: 0.2em solid #ccc;\t\/* added border color *\/\r\n\tcolor: black;\r\n}\r\n\r\n.btn3:hover {\r\n\tbackground-color:#3f708a;\t\t\/* deep blue color *\/\r\n\tbox-shadow: .1em .1em 1em #ccc;\t\/* added box shadow *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
See how the buttons look in normal and hover state in the browser:
\n
\"Buttons<\/a>
Buttons Hover Effects Examples<\/figcaption><\/figure><\/p>\n
2.2 Other Elements Hovers<\/h3>\n
Lets take for example a simple html menu, and give the menu items hover effects:<\/p>\n
\r\n<div class=\"menu2\">\r\n    <a href=\"#1\">Home<\/a>\r\n    <a href=\"#2\" class=\"current\">Profile<\/a>\r\n    <a href=\"#3\">About<\/a>\r\n    <a href=\"#4\">Contact<\/a>\r\n    <a href=\"#5\">Sth Else Here<\/a>\r\n<\/div>\r\n<\/pre>\n
Notice how you can add image effects using hover to the menu, in this case a gradient image:<\/p>\n
\r\ndiv.menu2\r\n{\r\n    text-align:center;\r\n    background-image: url(bg1.gif);\r\n    border:1px solid black;\r\n    font-size:0;\r\n}\r\n\r\ndiv.menu2 a\r\n{\r\n    display: inline-block;\r\n    padding: 0 20px;\r\n    background-image: url(bg.gif);\r\n    color:White;\r\n    text-decoration:none;\r\n    font: bold 12px Arial;\r\n    line-height: 32px;\r\n}\r\n\r\ndiv.menu2 a:hover, div.menu2 a.current\r\n{\r\n    background-position:0 -60px;\r\n}\r\n<\/pre>\n
The menu would look like this:
\n
\"Menu<\/a>
Menu Image Hovers Example<\/figcaption><\/figure><\/p>\n
2.3 Box Hover Animation and Added Text<\/h3>\n
THe following example is something advanced brought in a simple way to you. It is a box that is going to be given attributes <\/p>\n
for the normal state and then it is going to expand and show extra lines of text when on hover state.<\/p>\n
\r\n<div class=\"box\"><span class=\"element1\">Hi Im not here at first, but only on hover.<\/span> I'm here for too long now.<\/div>\r\n<\/pre>\n
Applying some simple logics in css that would look like this:<\/p>\n
\r\n.box {\r\n\tmargin-top: 5em;\r\n\twidth: 15em;\r\n\theight: 8em;\r\n\tfont-size: 1.2em;\r\n\tfont-family: \"Montserrat\";\r\n\tcolor: white;\r\n\tbackground-color: #464646;\r\n\ttransition: width 2s;\r\n}\r\n\r\nspan {\r\n\tdisplay: none;\t\/* span should not be visible at first *\/\r\n}\r\n\r\n.box:hover{\r\n\twidth: 25em;\t\/* box expanding on hover *\/\r\n}\r\n\r\n.box:hover .element1 {\r\n\tdisplay: block;\t\t\/* span showing on hover *\/\r\n}\r\n<\/pre>\n
The result, like you may have been wondering, would be:
\n
\"Advanced<\/a>
Advanced Hover – Animation and Element Adding<\/figcaption><\/figure>
\nIt all comes beautifully animated and adjusts the text according to the new width.<\/p>\n
3. Conclusion<\/h2>\n
To conclude, we can say that hovering elements should be used to have your website better designed.<\/p>\n
It comes to usage in an easy form, only by adding the :hover<\/code> in css, but when considering more advanced stuff like animation or adding elements after mouse over, it can get complicated.<\/p>\n
However, keep in mind to use these hovering effects using only css and not javascript because it is the lightest way not to overload your website with js.<\/p>\n
4. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Hover Effects<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to make elements eye-catching and enhance usability. In a more functional note, it lets you know that (in most cases) something is clickable, like a link, an …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Hover Effects Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Hover Effects Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-29T09:15:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:32:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Hover Effects Example\",\"datePublished\":\"2015-06-29T09:15:33+00:00\",\"dateModified\":\"2018-01-08T12:32:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\"},\"wordCount\":636,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\",\"name\":\"CSS Hover Effects Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-29T09:15:33+00:00\",\"dateModified\":\"2018-01-08T12:32:50+00:00\",\"description\":\"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Hover Effects Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Hover Effects Example - Web Code Geeks - 2026","description":"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to","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:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Hover Effects Example - Web Code Geeks - 2026","og_description":"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-29T09:15:33+00:00","article_modified_time":"2018-01-08T12:32:50+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Hover Effects Example","datePublished":"2015-06-29T09:15:33+00:00","dateModified":"2018-01-08T12:32:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/"},"wordCount":636,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/","name":"CSS Hover Effects Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-29T09:15:33+00:00","dateModified":"2018-01-08T12:32:50+00:00","description":"In this example, we will go through performing hover effects on CSS. You see hover effects on almost every webpage nowadays, it seems to be a good way to","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-hover-effects-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Hover Effects Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5133"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}