CODEWITHSUNDEEP
css
JustAspMe
JustAspMe

Reputation: 418

How to position 3 images on top of one another and retain responsiveness using just CSS?

I have 3 images I'd like positioned on top of one another "centered" and would like to retain a responsive design.

Currently, I have to employ js during the resize of the window to position the images correctly. Is there a pure CSS way of doing this?

Here is the jsfiddle of what I have working.

https://jsfiddle.net/zt2Lca7v/

<div id="box">
<img id="back" src="http://esurf.us/x/csstry001/back.png" class="img-responsive" />
<img id="front" src="http://esurf.us/x/csstry001/front.png" class="img-responsive" />      
<img id="vline" src="http://esurf.us/x/csstry001/vline.png" class="img-responsive" />      
</div>

body {background-color:black;margin:0;padding:0;}
#box{position:relative;display:block;width:100%;margin:0 auto;}
#back
{
    width:100%;
    display:block;
    margin: 0 auto; 
    position:absolute;
}
#front
{
    display:block;
    position:absolute;
    width:34.0037%
}
#vline
{
    display:block;  
    position:absolute;
    width:2.7422%
}
@media only screen and (min-width: 769px) {
    #box{width:90%;}    
}

function resetimgpos()
{       
    var imgb = document.getElementById("back");
    var wb = imgb.clientWidth;
    var hb = imgb.clientHeight;

    var imgf = document.getElementById("front");
    var wf = imgf.clientWidth;
    var hf = imgf.clientWidth;

    var tf = ((hb - hf)/2) + 'px';
    var lf = ((wb - wf)/2) + 'px';

    $("#front").css({top: tf});
    $("#front").css({left: lf});

    var imgl = document.getElementById("vline");
    var wl = imgl.clientWidth;
    var hl = imgl.clientWidth;

    var ll = ((wb - wl) / 2) + 'px';

    $("#vline").css({left: ll});

}
$(function() {
    $(window).resize(function(){
        resetimgpos();
    });
    resetimgpos();
});

Thanks in advance.

Upvotes: 0

Views: 367

Answers (3)

Silent_Coder
Silent_Coder

Reputation: 150

As mentioned by @sajran. You can use the translate to align the image vertically center.

Here is the working fiddle link:

http://jsfiddle.net/aL72r8qf

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

You could use %, margin and absolute:

http://codepen.io/anon/pen/zGgmyQ

#box {
  position: relative;/* you need this ! */
  /*demo purpose START */
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
}

#box:hover img {
  opacity: 0.35;
  /*demo purpose END */
}

#back {
  display: block;
  width: 100%;
}

#front {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  margin: -5% 0 0 -5.2%;/* tune this if new image or different shape */
  z-index: 1;
}

#vline {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  margin-left: -1.5%/*tune this if new image or different shape*/
}
<div id="box">
<img id="back" src="http://esurf.us/x/csstry001/back.png" class="img-responsive" />
<img id="front" src="http://esurf.us/x/csstry001/front.png" class="img-responsive" />      
<img id="vline" src="http://esurf.us/x/csstry001/vline.png" class="img-responsive" />      
</div>

When you set a width or a height to an image, it keeps it's ratio. (the line is here 100% tall and the dialer is 10% width)

You may adjust size and margins to your real needs.

Upvotes: 1

sajran
sajran

Reputation: 317

Your problem is to center image in div which size you don't know.

  1. Change #back image position to relative thus it will stretch parent div.

  2. Set position of two other images to absolute and set top: 50% and left: 50% to position their left top corner in center of parent div.

  3. Use transform: translate(-50%, -50%) on circle image.

  4. Use transform: translateX(-50%) on line image.

Translate set to -50% moves div 50% of its own width/height to left/top.

See Fiddle.

I know my English is not very good but I hope you will understand it.

EDIT: Of course for line image you don't need top: 50%, sorry for my mistake.

Upvotes: 1

Related Questions