/responsive-card

This repository consists of a responsive card with hover effects on the desktop version.

Primary LanguageCSS

Card with transitions

This repository hosts a card that was created using the following;

  • HTML5
  • CSS
  • BEM

Case study

Learned how to create a card and understood why BEM is important and understood about object oriented CSS and they are as follow;

  • Container and content must be separate
  • Skin and structure must be different

Struggles

  • Getting the lower half of the card to be a different color and occupy the full width
  • The image scaling to 1.15 when we hover over the card

Solutions

  • To get the lower half colored with a separate color, had to use padding inside the card elements

  • Had to target the image like this .card:hover img

Findings

  • On mobile devices hover does not work due to that created media-query and assigned it only to desktop sites.

Credits