0

I want to add :hover pseudo-class to h1. First, background-color must be equal = 0% (I add a color for test, but at the end background-color will be white) then when hover to h1, background-color must be gray and size to 100% 100%. I can't do that. :')

.back{
    border: 1px solid black;
    width: 250px;
    background-color: tomato;
    height: 100px;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: 1s all;
    
}
.back:hover{
  
    background-color: gray;
    background-size: 100% 100%;
    

}
 <h1 class="back"></h1>
TechySharnav
  • 4,869
  • 2
  • 11
  • 29
robpertbarty
  • 23
  • 3
  • The `background-size` property specifies the size of the background images. – TechySharnav Aug 16 '21 at 08:21
  • No, I remember! Somebody did it for an input. But I couldn't find that... :( – robpertbarty Aug 16 '21 at 08:22
  • Please describe it better what you want. As @TechySharnav mentioned above, `background-size` specifies the size of the background images. Do you want to change the box size? – Engin Aug 16 '21 at 08:24
  • Okay. https://stackoverflow.com/questions/7861648/animate-an-elements-width-from-0-to-100-with-it-and-its-wrapper-being-only-a I want to do this for background-color. ^^ – robpertbarty Aug 16 '21 at 08:26

2 Answers2

0

From your comment it seems you want something like this, correct me if I am wrong.

.back{
    border: 1px solid black;
    width: 250px;
    background-color: white;
    height: 100px;
    width: 0%;
    background-repeat: no-repeat;
    transition: 1s all;
    
}
.back:hover{
  
    background-color: gray;
    width: 250px;
    

}
<h1 class="back">Header</h1>

I added a text in your h1 tag for easier use since I suppose you do have some text in there.

bluejambo
  • 221
  • 1
  • 11
  • Yeah! what I want is like this. But I remember border and width was same... Anyway, it is useful, also. Thank you a lot! – robpertbarty Aug 16 '21 at 08:36
-1

You must use "div" not h1. Also u should set the height of body to 100%, so that on hover, your div gets the fullscreen

HTML, body{
    height:100%
}

.back{
    border: 1px solid black;
    width: 250px;
    background-color: tomato;
    height: 100px;
    background-repeat: no-repeat;
    transition: 1s all;
    
}
.back:hover{
  
    background-color: gray;
    width: 100%;
    height: 100%;

    

}
 <div class="back"></div>
Elguja Lomsadze
  • 118
  • 2