As part of the course I'm taking we are encouraged to do our own research-- I could have learned my course for free online but I want the piece of paper from uni to take to interviews.
Here's my first post, please leave feedback if you see this so I can find some webdev friends and learn things!
/HTML CSS coding for Animating CSS Grid using only CSS (no Javascript)/
(.left is the selector, :hover psuedo-class)
/now we edit StyleCSS/
.grid{ display:grid;
grid-template-columns: 48 px auto;
transition: 300ms;}
/Both grid-template-columns and transition are adjustable to suite user/developer needs/
/* the update to make the transition slide out with a hover feature*/
.grid:has(.left:hover){/hover styles/ --left:30%;}
/* the :has is the parent selector in this case*/
This programming has potential to create three separate columns each with an expanding feature, so you can potentially program ex: grid-template-columns: 1fr 1fr 1fr
Display cannot be hidden and must be set to display none.
, it will acknowledge the section even if set to 0fr.
Top comments (0)