HTML鼠标移到链接上显示图片与信息

怎么才能做出这个效果啊

<div class="lk">
        <a href="">链接1</a>
        <div class="info">
            图片和信息
        </div>
    </div>
    <div class="lk">
        <a href="">链接2</a>
        <div class="info">
            图片和信息
        </div>
    </div>

<style>
        .lk .info{
            display: none;
        }
        .lk a:hover+.info{
            display: block;
        }
    </style>