CODEWITHSUNDEEP
css
MEM
MEM

Reputation: 31317

How to Center an image on top of another image using CSS?

I wish to achieve the following effect, regardless browser (re)size: video cavas example

The images are set to be flexible, so, each of them as a max-width declared as: 100%.

http://jsfiddle.net/rgdrqbg4/

The css:

img {
    max-width: 100% !important;
    vertical-align: middle;
}

.home-video {
    position: relative;
    width: 57.291666666667%;
}

.video-placeholder {
    position: relative;
    left: 0;
    top:0;
}

.play-video {
    position: absolute;
    left: 32.545454545455%;
    top: 22.508038585209%;
}

Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?

Upvotes: 0

Views: 80

Answers (3)

Carlos Calla
Carlos Calla

Reputation: 6706

A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.

Try this:

.play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -97px;
}

Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/

UPDATE

You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.

.play-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/

This will only work if the image inside is smaller than the image that is wrapping it.

UPDATE

You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:

I added a width of 30% to the black box so it can shrink with the larger image too.

.home-video{
    display: inline-block;
}
.play-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    margin: auto;
}

And remove the width you set before.

Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/

Upvotes: 1

Stephen Burke
Stephen Burke

Reputation: 459

Do you mean like this? You were on the right track.

.play-video { position: absolute; top:20%; height:inherit; left:28%; width:40%; margin:0 auto; }

http://jsfiddle.net/rgdrqbg4/7/

Upvotes: 0

alessandrio
alessandrio

Reputation: 4370

img {
    max-width: 100% !important;
    vertical-align: middle;
}

.home-video {
    position: relative;
    width: 57.291666666667%;
}

.video-placeholder {
    position: relative;
    left: 0;
    top:0;
}

.play-video {
    position: absolute;
    left: 32.545454545455%;
    top: 25.508038585209%;
    width: 34%;
    height: 40%;
}
<div class="home-video">
    <img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
    <img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>

Upvotes: 0

Related Questions