Cambio de color de imagen en hover

[mardojai]

Primero, de este lugar descarga estos dos archivos: "jquery.magnific-popup.min.js" y "magnific-popup.css". Después de descargarlos, en la carpeta de tu web crea una nueva carpeta llamada "magnific-popup" y pones dentro de ella los dos archivos que descargaste.

Ahora llamalos desde el head de tu web junto a Jquery que llamaremos externamente, de esta manera:

Código HTML:

<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
 
<!-- jQuery  -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Magnific Popup JS -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
 

Después en el "href" de cada "bluecircle" pondrás la imagen en grade que quieres abrir en lugar del "#".

En seguida, debajo de tu div "galeria" pondrás:

Código HTML:

<script>
    $(document).ready(function() {
    $('#galeria').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Cargando imagen #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',       
        }
    });
});
</script>
 

Con eso funcionaria, ahora lo siguiente:

En tu css no necesitas el:

Código CSS:

a.bluecircle:hover {
filter: grayscale(0%);
}
 

Y el:

Código CSS:

img {
border-radius: 150px;
padding: 20px;
}
 

Te recomendaría que sea:

Código CSS:

a.bluecircle img {
border-radius: 150px;
padding: 20px;
}
 

Saludos!

Edito: Para más información esta la documentación official: http://dimsemenov.com/plugins/magnif...mentation.html