I have a few photos and I want on hover I want to cover them with background: black; I want to cover the whole image with black for example. The hover effect just doesn't appear. I suspect the problem is in the CSS selectors.
Here is the fiddle: http://jsfiddle.net/20oomme4/3/
I tested your fiddle and it is working. I modified the colors and tested again - and it worked again. However, you images were broken links, so I could easily see the background color. My guess is that your images are opaque and, therefore, you cannot see the color that is BEHIND them.
Your best bet is to create two images - one with normal color and one with black color. Call the normal image "NormalImage.jpg" and call the black background one "NormalImage_black.jpg". Then, onhover, replace ".jpg" with "_black.jpg" - and on mouseout, replace "_black.jpg" with ".jpg". If you are having trouble doing this with css, try using Javacsript - and remember to load all images (but hide the backgorund ones) upon page_load, so that when someone hovers, the browser doens't have to load the image - it only needs to display it.
I'm unsure of what you want exactly. If you want a transparent background to cover the image.
jsfiddle
Other wise you would need to use transparent png's to change the white to black background on the image itself.
.img-responsive.products {
border: 1px solid black;
cursor: pointer;
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption {
height: 100%;
width: 100%;
opacity: 0;
color:#fff;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
.col-sm-3:hover figcaption {
opacity: 0.4;
}
The hover effect is working as it is intended, the problem is the images are taking up the full area so you can't see any background effects. Try giving the images a padding:20px; to see the background changes. As mentioned above you will need to either create an image sprite or change the image to a transparent .png in order for the full background to change.
ex: http://jsfiddle.net/20oomme4/6/
Check this fiddle
This is the same CSS that you used, ie.
.img-responsive.products:hover {
background-color: black;
}
Only thing is that i've used a png image with no background. And as you can see in the fiddle your code works correctly.
So, As i mentioned in my comments, i would suggest you to use a png image without any background.
Related
I have a PNG. I'm trying to put it on my website but for some reason, it is showing the PNG background, even though the file type is .png.
CSS Code:
.items img{
border: none;
background: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
display: block;
}
This is what it is showing on top of a black background.
The html is just an img tag with the source linking to the png.
It is not a PNG file. You can see it if you open in Photoshop, background is not transparent.
If you want your file transparent, let's use Magic Wand to select the selection area you want to clear.
How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?
Question below was asked previously -
Change color of PNG image via CSS?
The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?
To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.
img {
-webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I played around a bit and found a possible solution to only paint the white parts:
img {
display: block;
background: black;
-webkit-filter: brightness(.5);
}
.recolor {
position: relative;
display: inline-block;
-webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.3);
}
<figure class="recolor">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>
How it works:
Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white
Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal
Just give background color to image, For Example below.
Use this image
NOTE: Image is transparent
CSS
img{
background-color: red;
}
HTML
<img src="test.png">
It IS possible to "colorise" a white image using filters but the results are imperfect.
The first step is a sepia filter and then a hue-rotate.
A true "Red" may be harder to achieve but you can play with this further.
img {
max-height: 100vh;
width: auto;
-webkit-filter:
sepia(100%)
saturate(2000%)
hue-rotate(222deg);
}
body {
background: green;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
How do I add an color overlay or maybe an opacity drop the the images on a wordpress homepage - they have a color overlay on hover - but I want them to be darker in the picture color, as I am trying to go with a dark theme.
As you can see on the left one - I have toned it down a little in photoshop, whereas the right image is how they normally look.
Is there a way to do this rather then possibly toning down every image via photoshop before I upload?
You can wrap the image in a container with the same size and change the opacity of the image, while the wrapper has a dark background color. It might be problematic in IE8.
div {
width: 400px;
height: 200px;
background-color: #1b1b1b;
}
img {
opacity: 0.5;
transition: opacity 0.25s;
}
img:hover {
opacity: 1;
}
<div>
<img src="http://lorempixel.com/400/200/" alt="img"/>
</div>
In the following code, I want to set the opacity only for the background color of the li (not the text). However, it is important NOT to use the rgba for the background.
I'm trying following, but it sets the opacity for the link text as well.
HTML:
<ul>
<li>Hello World</li>
</ul>
CSS:
body{
background: red;
}
ul{
margin: 100px;
}
li{
padding: 10px;
background: #000000;
opacity: 0.1;
}
a{
color: #fff;
font-weight: 700;
opacity: 1;
}
JSFiddle:
http://jsfiddle.net/2uJhL/
Old question, but new answer! :)
Fortunately, the new versions of Chrome and Firefox support 8 digit colors. That's really cool, especially when you're developing and testing software.
For example:
background-color: #ff0000; (Red)
If you want a opacity of 0.5, you can do this:
background-color: #ff00007f (The 7F is half of FF)
So, from now on you won't need to use the rgba() if you don't want or have the entire div fade away - because of the opacity: 0.x - when you only want the background color a little bit transparent.
But remember that not all browsers support that. So, please test the snippet below on Chrome or Firefox, ok?
Isn't that cool???
<div style="background-color: #ff00003f;">better than [opacity: 0.25]</div>
<div style="background-color: #ff00007f;">better than [opacity: 0.50]</div>
<div style="background-color: #ff0000bf;">better than [opacity: 0.75]</div>
<div style="background-color: #ff0000ff;">better than [opacity: 1.00]</div>
Source: https://css-tricks.com/8-digit-hex-codes/
You can set a PNG or GIF image as background, i.e:
li {
background-image: url('path/to/your/image.png');
}
The opacity is applied at the content and all children. You can't set a different opacity for the children.
However if you don't want to use rgba you can use a png with opacity that you want.
And setting a png to your li in the background is the best solution in this case
tl;dr Cmiiw, you can't setting the background opacity without RGBA
Let me try to give another solution.
This solution is not the real answer for the problem, but it may helps.
For me, you just need to convert the background color (hex value) to RGBA, using tools something like this https://cssgenerator.org/rgba-and-hex-color-generator.html.
Then, just use the RGBA value in your background color.
I have set a specific background color for the body. I then want to use another div with the same background color but with opacity: .95 as a mask for content animating from the bottom of the page. This results in the masking div appearing to be a slightly different color. Is there any way around this?
See a screenshot here and the sample CSS below. I'm on Chrome 20 on Lion.
body
{
background: #3f3c45;
}
#bottommask
{
background: #3f3c45;
opacity: .95;
}
UPDATE: Please check this fiddle demonstrating the issue
UPDATED SOLUTION: It seems that at least in Chrome, using -webkit-backface-visibility: hidden; on the mask div solves the issue.
It it a matter of computing the effect of the 5% color gain from below.
Three ways:
calculating, or
trial/error with Firebug color picker, or
make a screenshot and sample the transparent color, then apply the sampled color to the non alpha background.
For the tattoo site, I've changed to a slightly different color, in order to accounting for the color shift of the opacity.
body {
background: #8d918f;
}