CSS Background color on website / CSS transition

HTML-CSS
1

Hello there.

Maybe someone can help me out.

I understand, that with

CSS transition

I can put on a background color and ever change it on hover on a website.


.animebox { 

 background-color: honeydew;

 transition:background 1s 

}

.animebox:hover {

 background-color: cornflowerblue

}

.anime {

background-color: cornflowerblue

}

But I am not able to get the desired image like in the image below:

Can someone help me out here to create that image with colors and text? Hovering not necessary. Thank you.

Anne

2

Hey @AnneTr2,

  • Next time you want to showcase a code, use the ` backtick so it is easier for everyone to read.
    Pre-formatted-text
    Pre-formatted-text1356×380 401 KB
  • On almost all of your CSS, you forgot to close them with a colon ;
3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

4

Hi @AnneTr2, after updating your code like @Catalactics suggested your code works fine for me on Codepen. Of course, you need to have at least an element in your HTML code with a class of animebox to see it work. My test code was simply <h2 class="animebox">This is a test</h2>

If you’re still having issues, can you paste both your HTML and CSS code in this forum so we can help you out?

Also, If you’re just trying to replicate the colored grid in the Google Drive file I would suggest reviewing the CSS Grid module, particularly

  • Create a Row Gap Using grid-column-gap
  • Create a Column Gap Using grid-column-gap
  • Use grid-row to Control SpacingPassed
  • Use grid-column to Control SpacingPassed
  • Place Items in Grid Areas Using the grid-area Property
1 Like