Submitted 3 months ago

Blog Preview site using html and css

mayank1405• 80

@mayank1405

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This would be my second project on frontend mentor. It feels nice to have completed this project and see it be almost the desired output. I would learn a bit of JS and make it more responsive

What challenges did you encounter, and how did you overcome them?

I couldn't figure out how to change the property of a parent element when hovering over a child element with only html and css. I didn't want to use JS as I wanted this to be a pure html css project. I would really appreciate if someone can suggest a way.

Community feedback

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted 3 months ago

Hi @mayank1405,

I'm glad I was able to help you out! Could you mark my comment as helpful when you have the chance? That would help me out a great deal!

I read the challenge again but couldn't find the specification to increase the box-shadow on the card when hovering the card title. But I must admit I have seen some other people do it. What I think is that they grow the box-shadow when the user hovers on the card and turn the card title yellow when that gets hovered. So there are two separate hover animations.

Marked as helpful

mayank1405• 80

@mayank1405

Posted 3 months ago

@DylandeBruijn hmmmm...... Ok I guess I should check that out. Anyways, Thanks again Dylan. Really appreciate the help.

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted 3 months ago

Hi @mayank1405,

Congratulations on another great solution! It's good that you want to learn a bit of JS an try to make it more responsive.

I would love to help you out with your challenge, but I'm confused what you are describing:

I couldn't figure out how to change the property of a parent element when hovering over a child element with only html and css.

Marked as helpful

mayank1405• 80

@mayank1405

Posted 3 months ago

Hi @DylandeBruijn Thanks a lot Dylan, your replies really are very encouraging and helpful. Much appreciated. The thing is in this challenge I had to implement a feature, that is whenever I hover upon the html and css text thats written in bold, it should turn yellow and the box's shadow should increase. Now all my elements are inside the whitebox div. That is a parent element. The text "HTML & CSS" is inside this div. It is a child of that. Now I want to know what to do so that when I hover on html css text, whitebox's shadow increases.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord