{"action":"opened","issue":{"url":"https://api.github.com/repos/rockysecrets/FEWD_FinalAssignment/issues/1","repository_url":"https://api.github.com/repos/rockysecrets/FEWD_FinalAssignment","labels_url":"https://api.github.com/repos/rockysecrets/FEWD_FinalAssignment/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/rockysecrets/FEWD_FinalAssignment/issues/1/comments","events_url":"https://api.github.com/repos/rockysecrets/FEWD_FinalAssignment/issues/1/events","html_url":"https://github.com/rockysecrets/FEWD_FinalAssignment/issues/1","id":138685135,"number":1,"title":"CSS button with text overlay","user":{"login":"wmyers","id":2910184,"avatar_url":"https://avatars.githubusercontent.com/u/2910184?v=3","gravatar_id":"","url":"https://api.github.com/users/wmyers","html_url":"https://github.com/wmyers","followers_url":"https://api.github.com/users/wmyers/followers","following_url":"https://api.github.com/users/wmyers/following{/other_user}","gists_url":"https://api.github.com/users/wmyers/gists{/gist_id}","starred_url":"https://api.github.com/users/wmyers/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wmyers/subscriptions","organizations_url":"https://api.github.com/users/wmyers/orgs","repos_url":"https://api.github.com/users/wmyers/repos","events_url":"https://api.github.com/users/wmyers/events{/privacy}","received_events_url":"https://api.github.com/users/wmyers/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-03-05T14:24:18Z","updated_at":"2016-03-05T14:24:18Z","closed_at":null,"body":"Hi Amanda\r\n\r\nI fixed your button style - it took longer than expected.\r\n\r\nHere's the CSS snippet:\r\n\r\n```\r\n#featuredarticles {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: center;\r\n}\r\n\r\n#featuredarticles a{\r\n  text-decoration: none;\r\n}\r\n\r\n#featuredarticles article {\r\n  display: flex;\r\n  width: 300px;\r\n  height:300px;\r\n  background-size:cover;\r\n  margin:20px;\r\n  position: relative;\r\n}\r\n\r\n#featuredarticles article:before{\r\n  content: \" \";\r\n  display: block;\r\n  background-color: rgba(0, 0, 0, 0);\r\n  width: 300px;\r\n  height: 300px;\r\n  transition: background-color 200ms linear;\r\n  position: absolute;\r\n  z-index: 1;\r\n}\r\n\r\n#featuredarticles article:hover:before{\r\n  background-color: rgba(0, 0, 0, 0.45);\r\n}\r\n\r\n#featuredarticles article p{\r\n  color: white;\r\n  font-size: 2.6em;\r\n  margin: auto;\r\n  text-align: center;\r\n  visibility: hidden;\r\n  z-index: 2;\r\n}\r\n\r\n#featuredarticles article:hover p{\r\n  visibility: visible;\r\n}\r\n\r\n.recipe1{\r\n  background: url(../img/cookies.jpg);\r\n}\r\n\r\n.recipe2{\r\n  background: url(../img/greentea.jpg);\r\n}\r\n\r\n.recipe3{\r\n  background: url(../img/fruitypebbles.jpg);\r\n}\r\n```\r\n\r\nand here's the HTML snippet (note I have removed the `.featuredrecipe` style as you were already styling `#featuredarticles article`):\r\n\r\n```\r\n       <div id=\"featuredarticles\">\r\n\t\t\t<a href=\"recipe.html\">\r\n\t\t\t\t<article class=\"recipe1\">\r\n\t\t\t\t\t<p> White Chocolate Cranberry Cookies</p>\r\n\t\t\t\t</article>\r\n\t\t\t</a>\r\n\r\n\t\t\t<a href=\"recipe.html\">\r\n\t\t\t\t<article class=\"recipe2\">\r\n\t\t\t\t\t<p>Matcha Cake</p>\r\n\t\t\t\t</article>\r\n\t\t\t</a>\r\n\r\n\t\t\t<a href=\"recipe.html\">\r\n\t\t\t\t<article class=\"recipe3\">\r\n\t\t\t\t\t<p>Fruity Pebbles Cake</p>\r\n\t\t\t\t</article>\r\n\t\t\t</a>\r\n\t\t</div>\r\n```"}}