JSFiddle - React, Tailwind, and code Playground

HTML

<div onmouseenter="highlight()" onmouseleave="unhighlight()" class="vcenter-parent">
  <img id="my-thumbnail" src="http://bit.ly/2e7xBXY" class="vcenter-child">
  <a   id="my-anchor" class="vcenter-child" href="#potato">Some Link</a>
</div>

CSS

.vcenter-parent {
  display: flex;
  justify-content: center;
}
.vcenter-child {
  align-self: center;
}
a {
  color: gray;
}

JavaScript

var myThumbnail = document.getElementById('my-thumbnail'),
  	myAnchor = document.getElementById('my-anchor');

function highlight() {
  myThumbnail.src = "http://bit.ly/2dSUZGO";
	myAnchor.style.color = "blue";
  myAnchor.style.fontWeight = "bold";
}
function unhighlight() {
	myThumbnail.src = "http://bit.ly/2e7xBXY";
	myAnchor.style.color = "gray";
  myAnchor.style.fontWeight = "normal";
}