Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

Hello, my hover feature in the CSS part is not passing the test, however it does work in the preview section, please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Blog Post Card</title>
</head>
<body>
<div class="blog-post-card">
        <img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" class="post-img" alt="computer">
<div class="post-content">
<h2 class="post-title">Title</h2>
<p class="post-excerpt">
    Text Summary
</p>
<a class="read-more">Read More</a>
    </div>
</div>



</body>
</html>

/* file: styles.css */
body {
  background: blue
}
.blog-post-card {
  border-radius: 10px;
  background:white;
  width: 500px;
  text-align: center;
  
}
.post-content{
  padding: 10px;
}
.post-title{
  color: blue;
  margin: 10px
}
.post-excerpt{
  color:green;
  margin: 10px;

}
.read-more{
  background:red;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  color:yellow;
  display: inline-block;
}
.read-more:hover{
  color: purple;
}
.post-img{
  width: 500px;
  border-bottom: 10px solid gold;

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

this mainly happened bcoz the test expects the hover state to be detected on a real link, and your “Read More” element isn’t treated as one(unit,) by the checker. now add a valid destination to it and make sure the hover behavior matches exactly what the challenge asks for, not just what looks right in preview.

1 Like
3
  • A hover effect that changes its background color.

Is your :hover selector changing the background color?

2 Likes
4

Thanks to both of you, i changed the link but it still didn’t pass, it was because my previous hover was only for the text and not the background color as suggested by dhess below. I fixed it and now it works

1 Like
5
  • A hover effect that changes its background color.

What your :hover currently does?

6

.read-more:hover{
color: purple;
}

It only made the text color change, not the background