JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hover image, the white opacity needs to be black :/</p>
<span class="transition container"><img src="http://www.theonecar.com/wp-content/uploads/2013/12/aston-martin-db9-153.jpg" class="transition" style="width:300px;height:auto;display:block"  /></span>

CSS

.container{
    display:inline-block;
    padding:5px;
    background-color:black;
    opacity: 1;
}

.container:hover{
    background-color:red;
}
img{
    opacity: 1;
}
img:hover{
    opacity: 0.7;
}

.transition{
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s 
    
}