Más imágenes y transiciones

Estos son cuatro de los ejemplos mostrados en el blog de Alessio Atzeni que nos ilustra sobre varios métodos de agregar transiciones en imágenes.

Cada uno de ellos tiene la misma estructura donde lo único que va cambiando es la clase del primer DIV a las que identifico como efecto1, efecto2, efecto3 y efecto4:

<div class="view efecto">
  <img src="URL_IMAGEN" />
  <div class="mask"></div>
  <div class="content">
    <a target="_blank" href="URL_ENLACE" class="info" title="abrir enlace">ver</a>
  </div>
</div>

En el DIV contenedor se incluye una imagen y dos DIVs extras, el primero (mask) es donde veremos el efecto y el segundo (content) es optativo y puede contener cualquier tipo e enlace.
El estilo general sería este:

<style>
  .view {  /* contenedor principal */
    border: 10px solid #ABC;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img { /* la imagen */
    display: block;
    position: relative;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }
  .view .mask { /* máscara con el efecto */
    cursor:pointer;
    height: 200px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  }
  .view .content { /* contenedor con el enlace optativo */
    height: 200px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;
  }
  .view a.info { /* el enlace optativo */
    background:url(URL_imagen) center no-repeat;
    display: inline-block;
    height:20px;
    opacity:0;
    padding:0;
    position:relative;
    text-decoration: none;
    text-indent:-9999px;
    width:20px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .view:hover a.info { /* efecto sobre el enlace */
    opacity:1;
    -moz-transform:translateY(100px);
   -webkit-transform:translateY(100px);
   -o-transform:translateY(100px);
   -ms-transform:translateY(100px);
   transform:translateY(100px);
  }
</style>

Y ahora, las variantes; por ejemplo el efecto1:

ver imagen

<style>
  .efecto1 img {
    opacity:1;
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform:scale(1,1);
  }
  .efecto1 .mask {
    border-color:rgba(0,0,0,0.7) transparent transparent transparent;
    border-style:solid;
    border-width:150px;
    height:0;
    opacity:0;
    width:0;
    -moz-transform:translateY(-125px);
    -webkit-transform:translateY(-125px);
    -o-transform:translateY(-125px);
    -ms-transform:translateY(-125px);
    transform:translateY(-125px);
  }
  .efecto1:hover img {
    opacity:0.7;
    -moz-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    -o-transform:scale(2,2);
    -ms-transform:scale(2,2);
    transform:scale(2,2);
  }
  .efecto1:hover .mask {
    opacity: 1;
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
</style>

ver imagen

<style>
  .efecto2 .mask {
    border: 0 solid rgba(0, 0, 0, 0.7);
    opacity: 0;
  }
  .efecto2:hover .mask {
    border-width: 101px;
    opacity: 1;
  }
</style>

ver imagen

<style>
  .efecto3 .mask {
    border-radius: 50px;
    border: 50px solid rgba(0, 255,255, 0.3);
    display: inline-block;
    height: 100px;
    left:101px;
    opacity:1;
    position:absolute;
    top:50px;
    width: 100px;
    -moz-transform:scale(4);
    -webkit-transform:scale(4);
    -o-transform:scale(4);
    -ms-transform:scale(4);
    transform:scale(4);
  }
  .efecto3:hover .mask {
    border:0px solid rgba(0, 255,255, 0.3);
    opacity: 0;
  }
</style>

ver imagen

<style>
  .efecto4 img {
    opacity:0.2;
  }
  .efecto4 .mask {
    border:100px solid rgba(255, 255, 0, 0.1);
    opacity:1;
  }
  .efecto4:hover .mask {
    border:0px double rgba(0, 0, 0, 0.5);
    opacity:0;
  }
  .efecto4:hover img {
    opacity:1;
  }
</style>