An overlay is an effect used on a website to steer users in the right direction of the next action they must take. Correct usage has the ability to create a positive user experience, which will keep users on your website.
<\/p>\n\n\n\n
There are a number of ways to create an overlay. There\u2019s no one right way \u2013 it\u2019s all about choosing the way that works best for your site and what you need.
<\/p>\n\n\n\n
In this guide, we\u2019ll focus on using basic HTML and CSS (no JavaScript) to get the overlay effect you are looking for when hovering over an image. <\/p>\n\n\n\n
Let\u2019s create your HTML boilerplate that will be used to create our image overlay:
<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t\/*No CSS to display yet*\/\n<\/style>\n<\/head>\n<body>\n\t<div class="container" ><\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nUnderstand the Problem<\/h2>\n\n\n\n
When attempting something new the first time, you should sit back and think about how the problem should be solved before consulting a search engine. When you have a solid understanding of how the overlay works and what we need to do, you will have better luck at looking up hints and tips, if needed.
<\/p>\n\n\n\nAs a recap, an overlay goes over a container (in our instance, an image) and does something to the image when we hover over it. This directs the user to interact with the site.
<\/p>\n\n\n\nMoving forward, think big picture \u2013 don\u2019t try to pour over all the minute details of how to do this. We have an image and we have an overlay \u2013 that is at least two containers. And those two containers need to be in a bigger container.
<\/p>\n\n\n\nDon\u2019t try to style anything yet \u2013 work purely on the HTML and code it up. See if you can block it out on your own before taking a look at the markup below:<\/p>\n\n\n\n
\t\t<html>\n\t<head>\n\t\t<style>\n\t\t\t\/*No CSS to display yet*\/\n<\/style>\n<\/head>\n<body>\n\t<div class="container" >\n\t<div class="overlay-outer>\n\t<img class="item-to-overlay" src="file-here" alt="this-is-our-image" \/>\n<div class="overlay-inner">\n\tThis is our overlay div.\n<\/div> \n<\/div>\n<\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nOnce we have the main blocks figured out, we can work on the styling. I like to start from the outside\/bigger containers and work my way into the smaller containers. It helps keep track of the actual widths of the container. You may find you prefer to start from the inside and work your way out \u2013 that\u2019s totally fine, too. Follow along with me below.<\/p>\n\n\n\n
Body <\/h3>\n\n\n\n
Starting from the outside and working our way in, we come to the body tag first \u2013 it\u2019s the biggest container on the page and holds our page. Here you can set a background color, margin, and the width and max-width of the application:
<\/p>\n\n\n\n<style>\n\tbody {\n\t\tbackground-color: gray;\n\t\tmax-width: 800px;\n\t\twidth: 100%;\n}\n<\/style>\n<\/pre><\/div>\n\n\n\nDiv.container <\/h3>\n\n\n\n
The next container we come to is our first div. This one is fairly straightforward. We just want it\u2019s width to be 100%.<\/p>\n\n\n\n
<style>\n\tbody {\n\t\tbackground-color: gray;\n\t\tmax-width: 800px;\n\t\twidth: 100%;\nmargin: 0 auto;\n}\ndiv.container {\n\twidth: 100%;\n}\n<\/style>\n<\/pre><\/div>\n\n\n\nDiv.overlay-outer<\/strong> <\/h3>\n\n\n\n
As we dive into the markup, the next
<div> <\/code>we come to is the one withclass=\u201doverlay-outer\u201d<\/code>. Here is where we need to start thinking about the styling of our overlay.
<\/p>\n\n\n\nThe first thing we need to do is make definitions for the container that the image and the overlay will be in. How much of the webpage\u2019s width do we want our overlay container to take up? What about the height? This is also the
<div><\/code> where we need to establish our \u201cfence\u201d for our image. So we need to add a position property to the element:
<\/p>\n\n\n\n<style>\n\tbody {\n\t\tbackground-color: gray;\n\t\tmax-width: 800px;\n\t\twidth: 100%;\nmargin: 0 auto;\n}\ndiv.container {\n\twidth: 100%;\n}\ndiv.overlay-outer {\n\twidth: 50%;\n\theight: 400px;\n\tposition: relative;\n}\ndiv.\n<\/style>\n<\/pre><\/div>\n\n\n\nCSS Overlay combines a lot of the stuff we have learned so far in CSS: positioning, background-color, opacity, object-fit and divs. After styling the outer overlay container, we need to take a look at the image and the inner overlay container.
<\/p>\n\n\n\nImg <\/h3>\n\n\n\n
The image element needs to match the width and height of the container it sits in. This is also the place to put a border if you\u2019d like, and to crop your image. <\/p>\n\n\n\n
Div.overlay-inner <\/h3>\n\n\n\n
The inner overlay
<div> <\/code>and its styles concern the actual look of the overlay. This is where you will choose your background color for your overlay, set the opacity to 0. Most importantly, we need to add aposition: absolute, top: 0 and left: 0<\/code> so that the overlay-inner div will situate itself on the<div> <\/code>that is set to position: relative. <\/p>\n\n\n\nDiv.overlay-inner p <\/h3>\n\n\n\n
Here we style the actual contents of the overlay container. <\/p>\n\n\n\n
Div.overlay-outer:hover .overlay-inner<\/h3>\n\n\n\n
Finally, we are going to put a :hover pseudo-class on our outside overlay container so that the overlay will show when we mouse over it:
<\/p>\n\n\n\n.outside:hover .inside {\n opacity: .8;\n transition: opacity .5s;\n}\n<\/pre><\/div>\n\n\n\nSetting the opacity between 0 and 1 allows for the background-color assigned to the inner overlay div to be translucent. The transition property makes it a smooth transition from opacity 0 to opacity 8.
<\/p>\n\n\n\nYou\u2019ve now successfully created a CSS overlay. Congratulations!
<\/p>\n\n\n\nUsing CSS and HTML is one of several ways you can create an overlay for an element. For this solution, we used several properties from CSS to assist: transition, position, object-fit, width, height and more.
<\/p>\n\n\n\nIn this article, we also learned how to approach our problem, how to block our HTML and then how to style the CSS for our overlay effect. In the code editor below is a working example of the points covered here:
<\/p>\n\n\n\n<html>\n<head>\n\t<style>\n\t\t\t* {\n \t\t\t\tbox-sizing: border-box;\n}\n\nbody {\n background: grey;\n max-width: 800px;\n height: 1000px;\n}\n\n.outside {\n width: 75%;\n height: 400px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n\n}\n\n\n.images {\n width: 100%;\n height: 400px;\n object-fit: cover;\n border: 5px double black;\n}\n\n.inside {\n background-color: #9c1203;\n height: 100%;\n width: 100%;\n opacity: 0;\n top: 0;\n left: 0;\n position: absolute;\n padding: 0;\n}\n\n.inside p {\n color: #fff;\n line-height: 150px;\n font-family: 'arial';\n padding: 20px;\n text-align: left;\n}\n\n.outside:hover .inside {\n opacity: .8;\n transition: opacity .5s;\n}\n<\/style>\n<\/head>\n<body>\n\t<div class="container" >\n \t\t<h1>CSS Overlay<\/h1>\n\t<div class="overlay-outer>\n\t<img class="images" src="https:\/\/images.unsplash.com\/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" \/> alt="this-is-our-image" \/>\n<div class="overlay-inner">\n\t<p>This is an overlay!<\/p>\n<\/div> \n<\/div>\n<\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\nTake the time to play around with the markup to see if you can make your own version of this overlay.
<\/p>\n","protected":false},"excerpt":{"rendered":"An overlay is an effect used on a website to steer users in the right direction of the next action they must take. Correct usage has the ability to create a positive user experience, which will keep users on your website. There are a number of ways to create an overlay. There\u2019s no one right…","protected":false},"author":77,"featured_media":18928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18927","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to Create a Basic CSS Overlay | Career Karma<\/title>\n<meta name=\"description\" content=\"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-overlay\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Basic CSS Overlay\" \/>\n<meta property=\"og:description\" content=\"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-overlay\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-01T22:39:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:41:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"522\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"How to Create a Basic CSS Overlay\",\"datePublished\":\"2020-07-01T22:39:54+00:00\",\"dateModified\":\"2020-12-29T19:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/\"},\"wordCount\":865,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/\",\"name\":\"How to Create a Basic CSS Overlay | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg\",\"datePublished\":\"2020-07-01T22:39:54+00:00\",\"dateModified\":\"2020-12-29T19:41:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg\",\"width\":1200,\"height\":522},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-overlay\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Basic CSS Overlay\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Basic CSS Overlay | Career Karma","description":"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.","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:\/\/careerkarma.com\/blog\/css-overlay\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Basic CSS Overlay","og_description":"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/css-overlay\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T22:39:54+00:00","article_modified_time":"2020-12-29T19:41:02+00:00","og_image":[{"width":1200,"height":522,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"How to Create a Basic CSS Overlay","datePublished":"2020-07-01T22:39:54+00:00","dateModified":"2020-12-29T19:41:02+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/"},"wordCount":865,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-overlay\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/","url":"https:\/\/careerkarma.com\/blog\/css-overlay\/","name":"How to Create a Basic CSS Overlay | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg","datePublished":"2020-07-01T22:39:54+00:00","dateModified":"2020-12-29T19:41:02+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Overlays tend to increase the quality of UX on a website by shifting the user's attention to what they should do next. Learn how to create a basic overlay in CSS on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-overlay\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-06-22-at-4.42.32-PM.jpg","width":1200,"height":522},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-overlay\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"How to Create a Basic CSS Overlay"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18927"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18927\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18928"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}