0

Hey guys i need help with some css i have some images that expand when i hover over them but it pushes everything away at the same time 

        <style>
    .box
{
   width: 750px;
   height: 1000px;
   border:1px solid green;


}
.enlarge-onhover {
     width: 125px;
     height: 125px;
}

.enlarge-onhover:hover {
     width: 225px;
     height: 225px;
}
</style>

I dont want it to do that i want it to just overlap the rest of the images and to expand on a left click rather than hover

Daniel Quinn
  • 1
  • Try using a `float` tag? Such as `float:right`. In my opinion, you should use JQuery for this. – TheGeekZn May 21 '13 at 10:45
  • Changing it to a click action requires javascript or you can play with the active pseudo class but I would recommend jquery for ease and control – Pete May 21 '13 at 10:46

3 Answers3

0

One way you can do this is to use Absolute positioning.

The problem is, as you're hovering, your changing the sizes (width and height), so it will move everything across and re-render the page.

Dave
  • 8,163
  • 11
  • 67
  • 103
0

You could use javascript (jquery to do this for you) if you wanted it to happen onclick.

You would have to put position: absolute; on your image for it not to disturb other elements.

$(".enlarge-onhover").click(function() {

      $(this).css({width: 255, height: 255});
});

If you just want it to happen on hover then just add position: absolute; to your image's css.

If you are not using jquery and just pure javascript you can achieve the same thing by doing;

var img = document.getElementById("myImg");

img.addEventListener("click", function() {

    img.style.width = "255px";
    img.style.height = "225px";
}, false);

The above assumes of course that your image has an id of myImg.

GriffLab
  • 2,076
  • 3
  • 20
  • 21
-1

As well as positioning the images along the X and Y axes, you can also set Z axis to make elements appear one on top of another.

I think the solution is to increase the z-index of the element on hover as
z-index: 50;

You will need to reset the z-index to 0 once the user un-hovers

This when combined with setting the position of the hovered/enlarged image to look like the thumbnail is enlarging, will do the trick for you.

You can read more about z-index here:
http://www.w3schools.com/cssref/pr_pos_z-index.asp

Pavan Kemparaju
  • 1,591
  • 3
  • 16
  • 25