New website help

[Chris MacDonald]

Hey folks,

 

Just thought it might be worth asking here as there are numerous immensely talented people who always know how to do these things. I am building my own website, purely for picking up bits of freelance work in my spare time and I've got a fairly decent idea of what I want, though I'm still playing around with a few design ideas...

 

My site is built using twitter bootstrap/css3/html, and I want it to open on my portfolio - but I would like the images to be shaded (say 50% opacity) with the colours in my logo, and then the colours fade out to reveal the image when you mouse-over/hover.

 

Any ideas how to impliment this?

 

click here to go to the site

 

the HTML for the images looks like this;

 

 

And the CSS for the images looks like:

 

.featureimg {
padding-bottom: 1px;
padding-top: 1px;
padding-left: 0px;
padding-right: 0px;
opacity: 0.60;
transform: 1.0s ease;
-webkit-transition: opacity 1.0s ease;
-moz-transition: opacity 1.0s ease;
transition: opacity 1.0s ease;
}

.featureimg:hover {
opacity: 1;
}

 

I have asked the question on stackoverflow, but the rate at which new topics appear is nothing short of astonishing. It's a wonder anything gets answered.

Edited February 4, 2014 by Macker