Skip to content

Instantly share code, notes, and snippets.

@jamesnotjim

jamesnotjim/highlightImageOnHover.html

Created December 2, 2016 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesnotjim/2f55806ac818c4ebb629c9034b2daada to your computer and use it in GitHub Desktop.
Save jamesnotjim/2f55806ac818c4ebb629c9034b2daada to your computer and use it in GitHub Desktop.
Download ZIP
A simple image opacity effect for use on images as links.
Raw
highlightImageOnHover.html
<!-- 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