issues with hover pseudo element

[fbrown222]

I'm having trouble with the hover element. I have even tried directly copying and pasting from Justine's example, but still not working properly (or rather the way I want it to). It shows a strip of the hovering but it only shows the hover image within that strip and not the whole picture. Any suggestions? See bad coding? (You'll definitely see some bad coding in general, it's all REALLY new to me). repo- 3 Thanks in advance :)

[JonSwallow]

@fbrown222 I had a hard time finding anything, but I do have something for you.

 <p> <div class="hover-element" align="center">
      Reveal the REAL monster
   </div></p>
<!-- Try removing the align = "center"-->
<p><div class="hover-element"> Reveal the REAL monster </div></p>
<!--In your CSS you already centered this, I know it seems funny but sometimes the smallest thing can break the code -->
.hover-element {
    font-size: 1em;
    background-color: rgb(174, 117, 98);
    background-size: 500, 300;
    color: #13181E;
    padding: 1em;
<!--Here is where you declared text aligned to center -->
    text-align: center;
}
.hover-element:hover {
    font-size: 1em;
    background-image: url("../images/mad_doctor.png");
    background-position: center center;
    background-size: cover;
    color: rgb(174, 117, 98);
    text-transform: uppercase;
    font-weight: bold;
    text-align: justify;
    letter-spacing: 0.2em;
    padding: 0em;
    height: 75%;
}

And finally, your code does not look bad at all. I hope that helps I did not run it but I think it may do it.

[JustineEvansUM]

Hey, @fbrown222! What are you talking about? This is great coding! Your fonts are great, your page is looking good, and you're rocking this!

In Layout we'll give to creating divs with sizes to make this more feasible, but I can help a bit: if you look at your last line of .hover-element:hover, you'll see a sizing of height: 75%. If you change that to a fixed size like 400px you'll see more of your image on hover. See it here!

Conversely, you can set the size of your background image proper by changing cover (cover the element) to contain (contain inside the element). This will render your image in full, but add a repeater. But we can turn that off! Try this:

<!-- Delete or comment out: -->
    background-size: cover

<!-- And replace with: -->
    background-size: contain;
    background-repeat: no-repeat;

Fun fun fun learning to coooooddddee

[fbrown222]

thank you both, I think that will work for now :) Also! I can't seem to get my background color to show up. I know the focus this week is just mainly text, but this is supposed to be a fairly simple code. I have it showing up as:

body {
  background-color: #D5A988;
    background: url("../images/left_branches.png") left repeat-y,
    url("../images/right_branches.png") right repeat-y;
    background-size: 10%;
}

At first it would show, but now there is nothing. ?

[JustineEvansUM]

Ooh spooky. You're doing some fancy overlaying of bg elements (awesome, I actually had to run some testing, good for you), which is reading top-to-bottom. Meaning, your page is prioritizing your url elements over your background color because they're lower on the call list. I'm kind of surprised this isn't working actually, but drop your background-color: #D5A988 below your background-size. It should work.

[fbrown222]

Thank you so much! That worked :)