1

Preemptive thanks for helping!

I am a beginner programmer, and I am trying to place one photo link over another in wordpress.

Here is the link

You can see in the link above that I want to place the bottom image over the top image, and keep them both responsive, yet I am having trouble with the css properties to achieve this..?

Any ideas?

Thank you so much,

-C

RSB
  • 47
  • 2
  • 6

2 Answers2

1

One css I would get friendly with is

.yourclass {
     z-index: 1;
     position: absolute;
}

z-index will allow you to put one image over another image, as long as you have a position you will be able to stack as many in one spot as you would like. Use top, left, right ,bottom to position where you want them.

Hope this helps!

Cam
  • 1,884
  • 11
  • 24
  • ah, yes, thanks, the z-index sounds like a very useful tool! I am still having some small issues getting this to work... the height and width seems to be going crazy :/ – RSB Jan 29 '14 at 20:17
  • adding position absolute appears to destroy the responsiveness of the image..? – RSB Jan 29 '14 at 21:04
  • I got it to work in chrome, but for some reason firefox is treating the code differently... – RSB Jan 29 '14 at 21:22
  • The php code: ` – RSB Jan 29 '14 at 23:15
  • and the style.css `img.header-image { position: relative; top: 0; left: 0px; display:inline; z-index:0; } img.header-image-home { display:inline; max-width:25.75%; z-index: 1; height:auto; top:0px; position:absolute; }` – RSB Jan 29 '14 at 23:16
  • Im not sure what display: inline is for but add display: inline-block; – Cam Jan 29 '14 at 23:17
  • I made that change for each style, but firefox is still doing something differently... works in chrome and safari – RSB Jan 30 '14 at 01:18
1

Wrap both images in a div and set position to relative.

<div style="position:relative;">
 <img src="#" style="left:0px; top:0px;"/>
 <img src="#" style="left:0px; top:0px;"/>
</div>

Update 1

Sorry, first answer wasn't working. I figured out the images are vertical perfectly aligned. The header image is aligned to the top of the window. The only this you need to do is:

.second-image-home
{
  position:absolute;
  top:0px;
}

This worked for me.

Images aligned

If you remove 

height:auto;

the image will be correctly sized.

Update 2

If I added this to the css:

.second-image-home
{
  height: 193px;
  width: 309px;
  //rest of the code
}

This happened:

Now perfectly aligned

Mark
  • 3,224
  • 2
  • 22
  • 30
  • Hey, sorry, your solution did not work correctly for me. It does place the bottom image on top, but they do not track together... you can see on the site. Any idea? – RSB Jan 29 '14 at 20:16
  • @RSB Try adding the folowing sizes to the CSS. height: 194px; width: 309px; – Mark Jan 29 '14 at 20:28
  • Updated answer. height must be 193px; – Mark Jan 29 '14 at 20:34
  • I did do this, but it does not look the same as mine... also, when I drag the image around the responsiveness is gone from that photo, unlike the other photo. For some reason, adding the position absolute destroys the responsiveness that I had before? – RSB Jan 29 '14 at 20:42
  • Ok, I got this to work in Chrome using
    outside of both images... but it's not work in Firefox??
     – RSB Jan 29 '14 at 21:15
  • @RSB http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements This arcticle says you need to add display:block; to the relative element make it work in Firefox. I hope this finally works. – Mark Jan 29 '14 at 21:48