JSFiddle - React, Tailwind, and code Playground
HTML
<div id="my-thumbnail-link" class="vcenter-parent">
<img class="vcenter-child">
<a href="#potato" class="vcenter-child">Some Link</a>
</div>
CSS
.vcenter-parent {
display: flex;
justify-content: center;
}
.vcenter-child {
align-self: center;
}
#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
background: url("http://bit.ly/2e7xBXY") no-repeat;
width: 32px;
height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
background: url("http://bit.ly/2dSUZGO") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
color: blue;
font-weight: bold;
}