JSFiddle - React, Tailwind, and code Playground

HTML

<div class="project1"> <a href="#"><img id="novel" src="http://monevator.com/wp-content/uploads/2008/12/small-cap-fireworks.jpg" onmouseover="this.src='http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA'" onmouseout="this.src='http://monevator.com/wp-content/uploads/2008/12/small-cap-fireworks.jpg'" /></a>

    <p class="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise.</p>
</div>

CSS

img {
    height:30%;
    width:30%;
}
.project1 p
{
    width: 65%;
    float: right;
    display:none;
    margin-left:5px;
}
.project1:hover .novelDescrip
{
    display:block;
}