laimas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.img {
width: 300px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
transition: .8s;
}
.img img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .8s;
}
.img.show img{
opacity: 1;
}
nav a{
font-size: 42px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var div = $(".img");
var img = $("img", div)[0];
$("nav a").each(function(i, el) {
var src = $(el).data("src");
$(el).mouseleave(function() {
div.removeClass("show");
}).mouseenter(function() {
img.src = src;
div.addClass("show");
});
});
});
</script>
</head>
<body>
<nav>
<a href="ссылка.php" data-src="https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg">текст</a>
<a href="ссылка2.php" data-src="https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg">текст2</a>
</nav>
<div class="img">
<img>
</div>
</body>
</html>