Is there a way to do this effect with images on hover with css?

Question 1

Here's an example with text, FIDDLE

<div>f</div>

div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: Tahoma;
 font-size: 26px;
  font-weight: bold;
  color: #415e9b;
  cursor: pointer;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
div:hover {
  background: #415e9b;
  color: #fff;
}

Question 2

You did not ask for a solution using JavaScript. However, I tried using an HTML <overlay> with some JavaScript, and it seems to work just fine.

The overlay is positioned exactly above the image, and hidden at first. It is shown only while the mouse is inside the image.

The computation expects the background of the image to be transparent.

I hope it helps.

<!doctype html>
<html>
<head>
    <title>Inverse Image on Hover</title>
    <meta charset="utf-8">
    <style>
        #logoImage, #logoOverlay {
            position: absolute;
            top: 0;
            left: 0;
        }
        #logoOverlay {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="logo">
        <img id="logoImage" src="logo.png" width="40" height="40" alt="logo">
        <canvas id="logoOverlay" width="40" height="40"></canvas>
    </div>

    <script>
    window.onload = init;

    function init() {
        var image = document.getElementById("logoImage");
        image.onmouseover = showOverlay;

        var overlayCanvas = document.getElementById("logoOverlay");
        overlayCanvas.onmouseout = hideOverlay;

        var overlayContext = overlayCanvas.getContext("2d");

        overlayContext.drawImage(image, 0, 0, overlayCanvas.width, overlayCanvas.height);
        var overlayImageData = overlayContext.getImageData(0, 0, overlayCanvas.width, overlayCanvas.height);
        var length = overlayImageData.data.length / 4;

        for (var i = 0; i < length; i++) {
            var r = overlayImageData.data[i * 4 + 0];
            var g = overlayImageData.data[i * 4 + 1];
            var b = overlayImageData.data[i * 4 + 2];
            var a = overlayImageData.data[i * 4 + 3];
            applyEffect(i, r, g, b, a, overlayImageData.data);
        }
        overlayContext.putImageData(overlayImageData, 0, 0);

    }

    function applyEffect(pos, r, g, b, a, data) {

        // your computation here based on red, green, blue, alpha pixel values
        if (a < 10) {
            // facebook blue
            data[pos * 4 + 0] = 59;
            data[pos * 4 + 1] = 89;
            data[pos * 4 + 2] = 152;
            data[pos * 4 + 3] = 255;
        }
        else {
            // opaque white
            data[pos * 4 + 0] = 255;
            data[pos * 4 + 1] = 255;
            data[pos * 4 + 2] = 255;
            data[pos * 4 + 3] = 255;
        }
    }

    function showOverlay()
    {
        var overlay = document.getElementById("logoOverlay");
        overlay.style.visibility = 'visible';
    }

    function hideOverlay()
    {
        var overlay = document.getElementById("logoOverlay");
        overlay.style.visibility = 'hidden';
    }

    </script>
</body>
</html>