Como conseguir hacer este efecto de hover

[dardosmania]

Hola.

Pues mirando por ahi paginas web he visto esta y me ha gustado el efecto que hace cuando haces el hover, pero no se como hacerlo del todo.

http://www.formtroopers.com/

son las imagenes que salen mas abajo, cuando tu pasas el raton se pone un fondo gris con rgb, pero lo que no se hacer es que haya una imagen en la division y que luego el fondo se sobreponga a la imagen.

Un Saludo.

[AngelKrak]

eso es facil amigo ahi te dejo el codigo ;)

Código HTML:

<div id="box">
  
  <div id="overlay">
    <span id="plus">Texto</span>
  </div>
  
</div>
 

Código CSS:

body {
  background: #e7e7e7;
}
 
#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
 
#overlay {
  background: rgba(103, 100, 100, 0.7);
  height: 100vh;
  text-align: center;
  padding: 80px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
}
 
#box:hover #overlay {
  opacity: 1;
}
 
#plus {
  color: rgba(255, 255, 255, .85);
  font-size: 20px;
}
 

Demo:
http://codepen.io/AngelKrak/pen/qOdWbV

[dardosmania]

Muchas gracias.

Esto me pasa por ser cabezón y querer hacerlo yo cuando las cosas están inventadas.