JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">
            <div class="slide-content">
                <div class="slide-title">
                    <h1>hello world</h1>
                </div>
                <div class="slide-desc">
                    <p>a description about something</p>
                </div>
            </div>
            <img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>
            
        </a>
    </li>
</ul>

CSS

li {
    list-style:none;    
}

.slide-content {
	position:absolute;
	color:red;
	padding: 0 10% 0 10%;
    top:50px;
}

li a:hover img{
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
}