How to make an image become brighter when you hover over it

I was asked could I do something like the effect on Robot Camel Films website where the image shows but faint and then when you hover over it, it becomes bright.

The answer is, I can figure it out! I had a look at the CSS of that page, which is shared by creative commons licence as set out below.

/*
Theme Name: Robot Camel Films
Theme URI: http://www.phasethreegoods.co.uk/blog
Description: Blank theme template by Phase Three Goods
Author: Bruce Sigrist
Author URI: http://www.phasethreegoods.co.uk
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

*/

I managed to do a demo of the effect, which is temporarily available. The code for this is below. I have included the top left corner rounded as well as I was unaware that you could just round one corner with the border.

<!doctype html>
<html>
<head>
    <title>Image select demonstration</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
	<style>
	
	.fixedwidth {
		width:550px;
		height:370px;
		margin:0 auto;
	}
	
	h3 {
	position: relative;
	top: -3em;
	text-align: center;
	font-family: "Headings", Tahoma, Trebuchet, sans-serif;
	color: white;
	text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.8); 
	
	}
	
	img {
	border-top-left-radius: 60px;
	-webkit-filter: brightness(0.5);
	-moz-filter: brightness(0.5);
	-ms-filter: brightness(0.5);
	-o-filter: brightness(0.5);
	filter: brightness(0.5);
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	transition: all 0.6s ease; 
	
	}

	img:hover {
	-webkit-filter: brightness(1);
	-moz-filter: brightness(1);
	-ms-filter: brightness(1);
	-o-filter: brightness(1);
	filter: brightness(1); 
	
	}	
	
	</style>

 
</head>

<body>
<div class="fixedwidth">
	
	<a href="http://176.32.230.9/karencropperdev.co.uk/cyoung1/"><img  width="500" height="350" src="img/example.jpg"" /></a>
	<h3>This is the title</h3>
	
</div>
</body>
</html>

I haven’t quite got the title in the right place, but I just wanted to see if I could overlay it and get the brightness thing working. This then prompts me to wonder whether the filter and transition details in the CSS need to have the browser vendor prefixes (webkit, moz etc).

There is a long description of all of the filter properties in CSS on CSS-Tricks dated May 2015. And another article about the transition dated August 2013 suggesting that for compatibility with all browsers “vendor prefixes are required, with the standard syntax declared last:”

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

A list of animatable properties is on the WC3 website.

I am unclear whether the vendor prefixes are still required as of May 2015. This was a question raised in the course forum.

I googled “are vendor prefixes still needed”. An answer in stackoverflow gave a link to a site (Can I Use?) where you can put in your code and it will tell you what it is compatible with. “Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.”

Image shared CC-BY caniuse.com

Image shared CC-BY caniuse.com

Colour code for previous image

573 Total Views 1 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *