Achieving specific image mouseover effect

Hi, can anyone suggest a script or let me know what sort of code should be used to achieve the same effect as this demo?

http://demo.joomshaper.com/extensions/free-extensions/image-gallery.html

I do know how to use opacity in CSS to make an image darker or lighter on mouseover, but this looks like it's using javascript and it looks much slicker. I'd really like to have darkened images that light up on mouseover, but with that fade effect instead of just instantly changing like the opacity setting does. Any sugestions? Thanks!

 

Someone helped me out and I've got it working now, so never mind!

 

Hopefully you DIDN'T use javascript for it? That's obviously CSS' job. If you had anchors around images inside a single parent container that's really simple stuff these days -- Just don't want you led down the garden path with broken, slow methodology just because you asked in the place where I bet some idiot said "use jquery".

.container a img {
	opacity:0.5;
	filter:alpha(opacity=50); /* legacy IE */
	-moz-transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	-o-transition:opacity 0.5s;
	transition:opacity 0.5s;
}

.container a:active img,
.container a:focus img,
.container a:hover img {
	opacity:1;
	filter:alpha(opacity=100); /* legacy IE */
}

Code (markup):

IE8/lower wouldn't get the slow fade in/out. OH WELL! They'd still get the light/dark hovers, good enough.