CODEWITHSUNDEEP
htmlcssimage
user3465849
user3465849

Reputation: 31

CSS - image over another image , both centered

I have two images, one on another. like this:

enter image description here

But, when the screen resize, the "play image" is not centered (like this: enter image description here

This is my html:

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:120px; left:80px;" />
</div>

And this is my css:

.flapImage{
   margin:0 auto;
   text-align:center;
   top:0;
   left:0;
   background-color:black;
}

You know another way to do it?

Upvotes: 0

Views: 4031

Answers (2)

Ali
Ali

Reputation: 11

use absolute and relative positioning, make the main image relative and other absolute. then write this in hovered image clas :

left: 50%;
top: 50%;
transform: translate(-50%, -50%)

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add this property 

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);" />
</div>

Upvotes: 7

Related Questions