TeriFash,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<a href="#" onclick="l_image('https://static.pexels.com/photos/353644/pexels-photo-353644.jpeg', 2); return false;">Elegance</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/356433/pexels-photo-356433.jpeg', 2); return false;">Creation</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/354249/pexels-photo-354249.jpeg', 2); return false;">Family Office</a>
<a href="#" onclick="l_image('https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg', 2); return false;">Experience</a>
<div class="img-container"><img src="https://static.pexels.com/photos/593330/pexels-photo-593330.jpeg" name="example_img"alt=""></div>
<script>
function l_image(a, b) {
if (window.t) clearTimeout(t);
if (window.t1) clearTimeout(t1);
var img = document.example_img;
img.style.transition = 'opacity ' + b + 's';
img.style.opacity = '0';
window.t = setTimeout(function() {
img.src = a;
}, b * 1000 - 500);
window.t1 = setTimeout(function() {
img.style.opacity = '1';
}, b * 1000);
}
</script>
</body>
</html>