Create a gist now

Instantly share code, notes, and snippets.

A simple image opacity effect for use on images as links.
<!-- Wrap image in a div with class="brightness" -->
<div class="brightness">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<!-- Add CSS to create the opacity effect -->
<style type="text/css">
.brightness {
background-color: white;
display: inline-block;
}
.brightness img:hover {
opacity: .5;
}
</style>
<!--
Inspiration: http://stackoverflow.com/questions/23469332/highlight-images-on-hover-on-any-background
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment