Enlarge image when hovering over parent element

Question

Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.

Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.

I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.

The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.

div.hov:hover >.thumbnail {
  position:fixed;
  top:100px;
  left:50px;
  width:800px;
  height:auto;
  display:block;
  z-index:999;
}

div.hov{
  width:101px;
  height:101px;
  float:left;
  overflow:visible;
  margin: 10px; 
}   

<p>
  <div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
  <div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>

Is there any way to achieve this? The hosted version is here.

Answer 1

You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).

HTML

<div class="box">
    <div class="thumbnail">
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
        <div class="overlay"></div>
    </div>
    <div class="large-image">
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
    </div>
</div>

Javascript (jQuery)

$('.overlay').hover(
    function () {
        $(this).closest('.box').addClass('show-large-image');
    },
    function () {
        $(this).closest('.box').removeClass('show-large-image');
});

CSS

.box {
    padding: 200px;
}
.thumbnail {
    position: relative;
    display: inline-block;
    border: 1px solid #888;
}
.overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.large-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
}
.large-image img {
    width: 100%;
}
.box.show-large-image .large-image {
    display: block;
}

Example: http://jsfiddle.net/dx0d1ceh/

Answer 2

Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it. use absolute positions, display:block and display:none and check if the z-index is right.

But is this really necessary? The hovering does not seem convenient to me....

Answer 3

one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery

heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/

don't mind the code, I put it together very quickly for you, but you can clean it up a bit.

html

<div class='image'>
    <img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>

<div id='modal'></div>

css

.image {
    display: inline-block;
    width: 100px;
    height: auto;
}
img {
    width: 100%;
    height: 100%;
    display: inline-block;
}
#modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

jquery

$(function() {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function (event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
        if($('#modal').css('display') != 'none') {
            $('#modal').css({
                top: currentMousePos.y,
                left: currentMousePos.x + 12
            });
        }
    });
    $('.image').on('mouseover', function() {
        var image = $(this).find('img');
        var modal = $('#modal');
        $(modal).html(image.clone());
        $(modal).css({
            top: currentMousePos.y,
            left: currentMousePos.x + 12
        });
        $(modal).show();

    });
    $('.image').on('mouseleave', function() {
        $(modal).hide();
    });
});