basic css & html

Community feedback

• 

  riverCodes•300

  @riverCodesPosted over 2 years ago

  So for the active states, here's what you need to do.

  1. wrap your <img> tag in a <a> tag. This is what should link to the content page when the user clicks on it.

  2. position: relative; on the <img>. Then, use pseudo elements img::before and img::after. position: absolute; on both of them. this will create two children of the <img> which will be lifted up from the flow of the document and will be positioned relative to your <img>

  3. The ::before will be the color. Set content: ""; (empty string), and top: 0, left: 0, width: 100%, height: 100%. set the color of your choice.

  4. the ::after will be the eye. Set content: "url(eye-icon-here)"; and position it to the center similarly.

  5. Set hover states on the pseudo elements. For example, img:hover::before and img:hover::after. In the hover pseudo elements, apply opacity: 1;. In img::before and img::after, apply opacity: 0;. This will make it so that when the user hovers on the pseudo elements, the styles appear and when not hovered, nothing happens.

  6. You can make the transition smoother by applying transition: opacity .5s ease; to the ::before and ::after elements.

  7. Additionally, change your div.attribution to footer.attribution. That will solve the last accessibility issue you have.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Yann•190

  @neuyannPosted over 2 years ago

  @riverCodes Thanks again.

  I uploaded the code but the pic active state doesnt work...

  0
• 

  riverCodes•300

  @riverCodesPosted over 2 years ago

  Hi, congrats on completing the challenge. The content inside the card looks great! I just commented on someone else's solution of the same challenge, and i notice similar issues in yours as well so I'm going to carry my feedback over to here.

  1. For the HTML and Accessibility issues,

  -put alt attributes on your images and icons. 
  -Change your div.cardBG to main.cardBG (<main class="cardBG">). 
  -Whenever you use a section, it needs to have one heading element inside it, 
  and the whole page needs to have at least one <h1> tag.
  

  2. You haven't implemented the active states yet. I don't know if it's because you missed it on the design references and you know how to achieve it, or if its because you don't know how to achieve it. If you want help with this I can help you out further.

  Besides that, I think the rest is good! Keep learning!

  Marked as helpful

  0

  ---

  

  Yann•190

  @neuyannPosted over 2 years ago

  @riverCodes thanks for your feedback. I really apreciate that.

  I updated the code, but i cant find how to change the main image to the active state (eye + color). any help? :)

  1