Cambio de color de imagen en hover

[fede5426]

Otra opción es Fancybox, es muy personalizable y funciona perfecto..

Aunque si no son muchas imágenes (para que no te vuelvas loco), podes hacerlo así:

Muestra: http://codepen.io/anon/pen/QbbqzY

Codigo simplificado (un solo item):

Código HTML:

<div class="item">
    <a class="bluecircle" href="#">
      <img width="150px" height="150px" src="http://i.imgur.com/OqoeDR0.jpg"/>
    </a>
    <div class="modal">
      <div class="img-window">
        <img width="400" height="400" src="http://i.imgur.com/OqoeDR0.jpg"/>
        <span class="close">X</span>
      </div>
    </div>
  </div>
 

Código CSS:

body{
  margin:0;
}
 
.container {
    display: inline-block;
}
 
 
.item{
  display:block;
  float:left;
}
 
a.bluecircle {
    display: block;
    height: 150px;
    position: relative;
    margin: 0px 10px 10px 40px;
    width: 150px;
}
a.bluecircle:before {
    border-radius: 150px;
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
    background: none;
    transition: background .2s linear;
}
a.bluecircle:hover:before {
    background: rgba(0, 138, 184, .5);  
}
 
.bluecircle > img {
    border-radius: 50%;
    padding: 20px;
}
 
.modal{
  display:none;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.6);
  position:absolute;
  z-index:1000;
  top:0;
  left:0
}
 
.modal .img-window{
  width:400px;
  padding:10px;
  background-color:rgba(255,255,255,.7);
  border-radius:.5em;
  position:absolute;
  top:15%;
  left:-215px;
  margin-left:50%;
}
 
.modal .img-window img{
  border-radius:.5em;
  margin:auto;
}
 
.modal .img-window span{
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#000;
  color:#fff;
  font-family:Calibri;
  font-weight:bold;
  border-radius:50%;
  padding:.2em .5em;
  border:2px solid #fff;
  cursor:pointer;
}
 

Código Javascript:

$(document).ready(function(){
  
  $(".bluecircle").click(function(){
    
    $(this).siblings(".modal").fadeIn();
    
  });
  
  $(".close").click(function(){
    
    $(this).parents(".modal").fadeOut();
    
  });
  
});
 

Saludos