Search code examples
htmlimagecellcss-tables

Align right and push paragraph outside of the div layer


Here is my page: http://www.ostmoconstruction.com/portfolio.php

If I hover over the first image in each row, the resulting image is the full size of the div and therefore, pushes the second image outside of visibility.

I would like the same thing to happen when I hover over the second image. Perhaps it would push the first image outside the left side of the div layer and display only the second image. I tried setting the positioning to absolute onhover and left: 0; and this seemed to work, but also seemed unstable and left the title of the first image in tact (sometimes conflicting with the title of the second).

Any ideas?


Solution

  • I ended up making the image's position absolute and wrapping it in a relatively positioned div layer then gave both negative left margins to align then correctly. The absolute positioning allowed my to bring it to the left and the relative positioning allowed my to push the other image outside of the container div. More info here: Move onmouseover images to the left?