先上效果图：

鼠标悬浮直接大图浮现！

首先css代码：

.big {
    overflow: hidden;
    display: none;
    position: absolute;
    top: 100px;
    left: 300px;
    width: 700px;
    height: 520px;
    z-index: 99;
}
.big img {
    position: absolute;
    top: 0;
    left: 0;
}

html：（我这里是多图显示，稍后会在js里一块贴出来）

<div class="form-group">
    <label class="col-sm-3 control-label">图片数据表id：</label>
    <div class="col-sm-8">
        <img width="200" height="100" th:src="*{picCode}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode2}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode3}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode4}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode5}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode6}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode7}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode8}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <img width="200" height="100" th:src="*{picCode9}" onmouseover="previewImg(this.src)"
             onmouseleave="hidenImg()" style="cursor:pointer;"/>
        <div class="big">
            <img alt="" class="bigImg" width="700" height="520">
        </div>
    </div>
</div>

js：

/**
 * 大图存放div
 */
var big = document.querySelector('.big');
/**
 * 获取大图元素
 */
var bigImg = document.querySelector('.bigImg');

/**
 * 页面加载完毕时执行
 */
window.onload = function () {
    /**
     * 获取所有img标签
     */
    let n = document.getElementsByTagName("img");
    /**
     * 循环img
     */
    for (tip of n) {
        if ((tip.src == null || tip.src == undefined || tip.src == "" || tip.src.toString().substr(0, 4) != 'data') && tip.className != "bigImg") {
            tip.style.display = 'none';
        }
    }
}

/**
 * 鼠标悬浮时调用，预览图片
 * @param src 传递src地址
 */
function previewImg(src) {
    //大图div显示
    big.style.display = 'block';
    //赋值
    bigImg.src = src;
}
/**
 * 鼠标离开时调用，隐藏预览图片
 */
function hidenImg() {
    /**
     * 隐藏大图div
     * @type {string} display
     */
    big.style.display = 'none';
    // 清空图片
    bigImg.src = "";
}

新版图片预览，样式优化，点击效果增加
免费下载地址