Chrome Logo Shine Through Effect
HTML
<img alt="Chrome" data-g-event="nav-logo" data-g-label="consumer-home" id="logo" src="https://www.google.com/intl/en/chrome/assets/common/images/chrome_logo_2x.png" style="">
CSS
body { background: black; }
#logo {
-webkit-mask: -webkit-gradient(radial, 17 17, 0, 17 17, 15, from(rgb(100, 0, 0)), color-stop(0.5, rgba(100, 0, 0, 0.2)), to(rgb(100, 0, 0)));
-webkit-transition: all 2s ease;
-webkit-mask-position: 1px 1px;
width: 123px;
}
#logo:hover {
-webkit-mask: -webkit-gradient(radial, 17 17, 0, 17 17, 15, from(rgb(100, 0, 0)), color-stop(0.5, rgba(100, 0, 0, 0.2)), to(rgb(100, 0, 0)));
-webkit-mask-position: 90px 1px;
}
JavaScript
$("#logo").on("mouseover", function() {
console.log("Hover");
});
console.log($("#logo"));