使用javascript在鼠标悬停时查看内容顶部的放大图像

Question

I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content ie like a popout.

How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that ie use a popout.

DEMO - js fiddle

html:

<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>

javascript:

function bigImg() {
            $("#test1").show();
        }

        function normalImg() {
            $("#test1").hide();
        }

Answer 1

It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.

You can achieve what you want several ways, here is one using absolute positioning for the big image:

 $('.small-image').on('mouseenter', function(e) { $(this).siblings('.big-image').show(); }).on('mouseleave', function(e) { $(this).siblings('.big-image').hide(); }) 

 body { overflow-x: hidden; } .row::after { content: ' '; display: block; clear: both; } .column { float: left; } .column1 { width: 20%; } .column2 { width: 80%; } img { max-width: 100%; height: auto; display: block; } .enlarge { position: relative; } .big-image { display: none; position: absolute; left: 100%; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="column column1"> <div class="enlarge"> <img src="http://lorempixel.com/400/300/" class="small-image" alt="image"> <div class="big-image"> <img src="http://lorempixel.com/400/300/" alt="" /> </div> </div> </div> <div class="column column2"> A LOT OF TEXT IN HERE </div> </div> 

Also on Fiddle .

Answer 2

Try putting the img tag outside of the column1 div and then it will no longer be restricted.

If the img is not showing ontop of the text try add css value z-index.

img {
z-index:2;
}

Answer 3

use :

$("#test" ).hover(function() {
  $("#test1").show();
},function(){
    $("#test1").hide();
});

https://jsfiddle.net/2rt836co/4/