@IfescohubSubmitted over 2 years ago
I am not able to apply hover to the image. Please how can I do that?
Dominik
@Dmnk28All comments
- @Dmnk28Posted over 2 years ago
Hi Udeh,
Nice work! I like that you tweaked your picture and name in the card footer. For perfectionists the footer text has to be centred vertically though ;-)
That's not an intuitive one: The principle is to lay two (or more) elements on top of each other and only displaying the top level one ("overlay") when the area is hovered. A more detailed explanation you could find here and modify their code to your needs: https://www.w3schools.com/howto/howto_css_image_overlay_title.asp . In our case we could use three "layers" (for the actual image, the overlay and the overlay icon).
And as the report says, I would recommend to use the lang-attribute on the html-tag. It's better for accessibility and therefore for SEO, too.
Marked as helpful0 - @do55Submitted over 2 years ago
I was unable to make sibling number light gray when hover on another number. I also had to hardcoded all 5 numbers with addEventListeners, perhaps there is some better alternative for this.
@Dmnk28Posted over 2 years agoHi Domi,
as Jamaal said, the :hover pseudo-class is the thing you'll need to achieve the light grey effect.
Instead of addressing the numbers one by one, try to select them all at once by using document.querrySelectorAll('.numbers') or document.getElementsByClassName('numbers'). You will get a NodeList, which you can loop through with forEach. Using Typescript you might need to convert the NodeList to an Array (with Array.from() or spread operator) before forEach.
In your css you could try to use a similar logic. instead of " #one, #two, #three, #four, #five {...}" for example ".numbers{...}" would have the same effect ;-)
Marked as helpful0 - @MaxSauerbreySubmitted almost 3 years ago
Open to any suggestion!
@Dmnk28Posted almost 3 years agoHi Max, Looks great! Your scss-file is very clean and easy to read. I might adapt one or two aspects of your writing style ;)
As the report indicates I would suggest to switch the html lang-attribute to "en" and to replace &--title (in &_text < .card) through an h-element. Both for SEO-reasons mainly.
The HTML is commented throughout. There are different approaches on commenting, I know, but in my eyes it tends to over-commenting. Choosing class-names so that they refer to the purpose of the element (you did that already) and only commenting that elements, which aren't easy to understand. Comments should be descriptive and not redundant (e.g. <footer class="attribution">...). The structuring character of a redundant comment could be compensated with a simple blank line.
Marked as helpful1
