JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image"><img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv" />ASAP ROCKY - Jack New City</div>
</div>

CSS

img.ri
{
  position: relative;
  max-width: 75%;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (orientation: portrait) {
  img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
  img.ri { max-height: 90%; }
}

img#hv {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

img#hv:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}