JSFiddle - React, Tailwind, and code Playground

HTML

<div class="opac">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" />
    <p class="fot">text here...</p>
</div>

CSS

img {

    opacity: 1;

    -webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -ms-transition: all .5s ease;

    -o-transition: all .5s ease;

    transition: all .5s ease;

}

p {

    -webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -ms-transition: all .5s ease;

    -o-transition: all .5s ease;

    transition: all .5s ease;

}

.opac:hover > img {

    opacity: .6;

}

.opac:hover > p {

    background: orange;

}