JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="list">
    <div class="line_one">om nom nom nom...</div>
    <div class="line_two">18 foods to make you incredibly hungry</div>
</div>

CSS

#list {
    display:block;
    position: relative;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;
    padding: 20px;
}
#list::after {
    transition: opacity 1s ease;
    content:"";
    background: url('http://whatscookingamerica.net/History/Hamburger2.jpg');
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

#list:hover::after {
    opacity: 0.5;
}