JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bloco1" id="bloco1">
    <img class="imgBloco1" src="{$path}/img/viverbempequeno.jpg" />
    <p class="fraseBloco1">VIVER BEM AGORA!</p> <span class="conteudoBloco1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare mauris ut sagittis pretium. Proin luctus eget massa non fermentum.

</span>

</div>

CSS

.bloco1 {
    height: 112px;
    line-height: 12px;
    background: #F57B22;
    margin-bottom: 21px;
    text-align: start;
    position: relative;
}
.bloco1 > img {
    float: left;
}
.fraseBloco1 {
    text-align: center;
    line-height: 110px;
}
.bloco1 > span {
    padding: 0;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
.bloco1 > * {
    opacity: 1;
    transition: opacity 1s;
}
.bloco1:hover > p, .bloco1:hover > img {
    opacity: 0;
}
.bloco1:hover > .conteudoBloco1 {
    opacity: 1;
}