JSFiddle - React, Tailwind, and code Playground

HTML

<a href="https://pt.wikipedia.org/wiki/Carlos_Valderrama" class="produto">
  <img src="http://www.diariopernambucano.com.br/wp-content/uploads/2011/10/valderrama-225x300.jpg" />
  <div class="carrinho">+</div>
  <div class="bg-title"></div>
  <div class="title-img">
    <h3>Carlos Valderrama</h3>
    <span>Meio-campista</span>
    <span>ColĂ´mbia</span>
  </div>
</a>

CSS

.produto{
  float: left;
  position:relative;
  width: 225px;
  height: 300px;
  overflow: hidden;
}

.title-img h3{margin: 0 0 10px 0;}
.title-img span:first-of-type{font-weight: bold}

.title-img{
  display:flex;
  flex-direction: column;
  color:#fff;
  padding: 25px 20px;
  font-family: sans-serif;
  position:absolute;
  top:245px;
  width:100%
}

.bg-title{
  background-color:rgba(220, 0, 60, 0.8);
  position:absolute;
  top:250px;
  width:250px;
  height: 200px;
  transform: rotate(-5deg);
}

.carrinho{
  background-color:transparent;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  color: transparent;
  font-size:2.5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produto:hover .title-img,
.produto:hover .bg-title{
   top:185px;
   transition: all .5s ease-out;
}

.produto:hover .carrinho{
   transition: background .5s ease-out;
   color: #fff;
   background:rgba(220, 0, 60, 0.5);
}