Slider horizontal e Hover com elementos

Bom dia Rodrigo,

Pelo que entendi, você quer apenas simular o efeito hover no thumbnail, certo? Então você pode fazer dessa forma:

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

	 

	E no css:

.content-img{
 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);
}

.bg-content{
 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;
}

.content-img:hover .title-img,
.content-img:hover .bg-title{

 top:185px;
 transition: all .5s ease-out;
}

.content-img:hover .bg-content{

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

	Se quiser visualizar o resultado, veja aqui: [https://jsfiddle.net/dougtop/4wd3fypr/](https://jsfiddle.net/dougtop/4wd3fypr/)

	 

	Espero ter ajudado! Abraços, Douglas.

Palmas para o efeito criado pelo @dougtop, mas pode ser melhorado suavizando a transição quando o mouse é retirado de cima da imagem.

Na CSS que ele criou substitua ease-out (que é para transição de saida) por ease-in (que é para transição de entrada) e acrescente a seguinte regra CSS para a transição de saida:

.bg-content, .bg-title, .title-img {

 transition: all .5s ease-out;
}

@Maujor Obrigado pelo complemento, faltou isso mesmo ;)

Muito obrigado @dougtog e @Maujor, o feedback de você foi super rápido e sensacional.

Mas a minha dúvida é agora com parte do código pronto como eu faço o slider ou carrousel de fotos, isso seria com o bootstrap?

Como fazer?

Oi Rodrigo,

Se você quiser fazer esse slider apenas com html e css, não irá conseguir seguir o exemplo que colocou, pois o máximo que dá para fazer assim é ter uma div com os "jogadores" dentro e uma barra de rolagem horizontal.

Se você quiser algo mais próximo do exemplo que deu, precisará trabalhar com javascript mesmo. A biblioteca de slider/carousel que eu indico é a slick: http://kenwheeler.github.io/slick/

Se optar por trabalhar com o bootstrap, acho que o componente que mais se aproxima do que você precisa é esse: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Abraços e bom desenvolvimento!