So I'm using this form from this site here
When I post the form in my website the entire form area is white background. Yet I keep looking through the code and I don't see anything specifying the color. Is there a way to make it so that it has an opacity of 0 or anything of the like? Thanks in advance.
Use this css rule:
#my_form
{
background-color: transparent;
}
Background color is the answer as previously posted by dotoree however as a side tip, use this CSS class to change the opacity of a div.
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I would go with a rgba value for the background color.
background: rgba(255,255,255,0.5); - white with a 50% transparency.
Related
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.
I have JQM footer bar with text and icon. I need it to be transparent but the icon should be viewable. The background listview should be visible using css, like in iOS-7.
You can try using the code below and jsfiddle demo
Place any content in your footer or any container. Use opacity ( supported IE8+) for all of them and handle it using javascript or css on hover with some transition effect.
footer{width: 500px;
background: #999;
opacity: 0.4; // or use rgba() where a opacity.
}
footer:hover{
opacity: 0.6;
}
Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
You may be able to use the css image filters, like this:
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
Here's a jsfiddle showing the Kickstarter logo on a blue background.
http://jsfiddle.net/62bCB/
Cheers,
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
img:hover {
opacity: 0.5;
}
Fiddle
The original CSS has:
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
you can use opacity value between 0.1 to 1
very light and 1 value is dark (default)
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}
I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.
Any ideas how to fix this?
You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)
Use instead of:
opacity: 0.6;
this:
background: rgba(255, 255, 255, 0.6);
The color is in RGB and the last digits are for the transparency level.
You'll need to position your transparent div absolutely.
http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.
Opacity is inherited. If the parent is see through, so are the children.
A better way to do this is to remove opacity and set the background color to be transparent:
.foo {
background: rgba(0,0,0,.5);
}
You should use transparent background, instead of opacity.
Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)
Use data-uri for better performance.
You could even do it with opacity. Here's an example:
HTML
<div id="wrapper">
<div id="contentOrWhatever">
</div>
</div>
CSS
body {
z-index:0;
}
#wrapper {
z-index:1;
opacity:0.6;
}
#contentOrWhatever {
z-index:99;
opacity:1;
}
So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever.
Hope I could help you.
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.