I want to let my visitors select from 3 images and once when they hover over the images they the full opacity will faded in, once they've clicked an image the full opacity should be displayed.
All I can find on Google is how to change opacity on hover but not how to change opacity when an image has been clicked.
Related
I have created an image gallery and every time I hover over one I want a white overlay to show that the image is being hovered on however I would not want to lose the quality of the image.I have already tried changing the opacity but I want it to start with a 100% opacity and then increase.However, this is not possible so I would like a highlight over the image without decreasing the quality.
Here is the link to my work:
http://www.mediafire.com/file/g1yagf1u6y7ea67/website%204.zip
Is there any way in CSS or HTML to do this?
You can use CSS filter property.
.your-image:hover {
-webkit-filter: brightness(1.15);
}
I'm trying to put the opacity of the background image, but the text seems to get blurry too..I just want the background to become opaque and not together with the text
When you select an image on web browser, the image become blue. If I want it become blue on hover, what should I do? I tried to have an overlapping div with blue background and opacity:0, then its opacity become 0.65 when hover, but I have no idea why the effect ran so slowly.
Here is a jsfiddle of what I tried to do: jsfiddle.net/hq5b2/1/
I made a Photoshop image for a fixed navigation background, so that is it somewhat see through. I changed the opacity on a gradient in Photoshop cs6, but as a placed the background on the navigation, it stayed solid and I could not see through it at all. Why is this happening? do I need css to change the opacity or can I just use the image.
here is the background code:
background-image: url(images/navBackground.png);
Opacity in photoshop doesn't show when uploading to web. It remains 100% opaque just less vibrant. You would need to alter the opacity of the image with css using the opacity property.
Here is the project site: Site Redesign.
What I'm trying to do is keep the backgrounds for each section to be at the 0.5-0.7 opacity, but the text in all the content at 1.0
I've tried making a class 'text' with opacity 1.0 but that doesnt do anything, and I don't want to lose the opacity currently there.
I believe your answer is here: CSS opacity only to background color not the text on it?.
You want to specify the transparent background with the background property.