0

I have something like that

<div id="hover_parent">
  <h3>Something</h3>
  <h3>Something else</h3>
</div>

that looks something like that

#hover_parent{
    background-image:url(animage.jpg) no-repeat;
    background-position:bottom left;
    background-size:cover;
    width:100%;
}

h3{
    margin-top:20px;
    width:50%;
    text-align:center;
    transition:0.2s;
}

h3:hover{
    margin-top:0px;
}

So what I want to achieve, is that the child-elements move a bit up when hovering them. What they do of course by using a smaller margin-top-amount when hovering.
But my problem then is that the whole parent moves (especially the background-image) up too when hovering a child-element.

How could I prevent that?

None of my child-elements do have a real absolute height, so I didn't come along with min-height and calc but that could do it - nor?

Gulam Hussain
  • 1,591
  • 10
  • 19
Daiaiai
  • 1,019
  • 3
  • 12
  • 28

1 Answers1

-1

try this. h3 required display:inline-block;

#hover_parent{
background:url(https://dummyimage.com/600x400/000/fff) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
  color:#fff;
  height:200px;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
 display:inline-block;
}
h3:hover{
margin-top:0px;
}
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
  • Yeah. But in your example the background is anyways bigger then the content. You see my problem if you use background:url(https://dummyimage.com/600x100/000/fff) no-repeat; – Daiaiai Aug 02 '19 at 10:15
  • Then you will required height to your div – Sumit Patel Aug 02 '19 at 11:35