Having some problems with adding a different color to my transparency. Previously it was a black fill on top of the image, so when I hover my image to it, the shade would light open. However, when I tried adding a red rgba color to it, the transparency remains the same color.
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
You need to change your colorproperty to background-color.
CSS
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2) !important;
}
JSFIDDLE
Related
Was reading how to do it on https://css-tricks.com/tinted-images-multiple-backgrounds/
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
For me, though, it doesn't seem to work. Fiddle: https://jsfiddle.net/w6jnv67c/
Any idea what I'm doing wrong?
In this case, what you are doing wrong is not allowing for the size of the image.
The image is placed at the top left of the div which, in this case, means that there is nothing to see in that area of the image.
Just make the div a little larger and you will see.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 75px;
height: 75px;
}
<div class="tinted-image">
</div>
So if you want the image to fit in the div you have to use background-size.
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
/* bottom, image */
url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
width: 50px;
height: 50px;
background-size: cover;
}
<div class="tinted-image">
</div>
I am putting a background Image and overlaying a gradient to make it darker of the overlay text is clearly visible. In IE its not working so I am using the filter: but that makes the gradient opaque. and the background is not visible... how to fix it?
.more {display:block;width:33.33%; padding:15px;padding-top:6em;background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(http://placeimg.com/760/460/tech ) no-repeat; background-size: cover; border:2px solid white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-decoration:none; color:white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#000000',GradientType=0 ); background-color: #eee;font-family: 'Fira Sans', sans-serif; width:350px;font-weight:bold; font-size:1.45em}
<a class="pod more" href="/markup-html-tags-and-formatting/">Markup: HTML Tags and Formatting</a>
user the following style will hopefully do the job for you
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#000000');
check the the Following link for quick understanding http://www.css3please.com/
This seems to work...
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
Link : http://jsfiddle.net/ps7h7bf3/
I have a div here with a button:
I want the contents of the div to be opaque while still keeping the semi-opaque background color.
The box will contain a menu.
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px;
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;
}
div.calcMenuContents {
opacity: 1;
}
The Run button is contained within the calcMenuContents div:
<div id="calculationMenu">
<div id="calcMenuContents">
<button onclick="runCalculations(2)" class="insideMenu">Run</button>
</div>
</div>
How may I make it so that the calcMenuContents are not semi-transparent?
Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div).
My only issue is that the parent
There is a solution! Use rgba background values and you can have transparency wherever you want :
#calculationMenu
{
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.4;*/
padding: 20px;
}
div.calcMenuContents
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/
use rgba()
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
you can change the background-color into an RGBA, so you would get:
background-color: rgba(106, 166, 217, 0.4);
If I'm right
You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.
I am trying to use gradient style for my buttons, but, I have a problem with hover style,
Here is the button before hover:
And here is after hover:
Here is haml of button:
= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
%h3
Take a Tour
LESS:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
}
Any idea please ? is it possible to specify another gradient style for hover state ?
Or at least, not to change button when hover ?
Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant have a transition). What is happening in your case, is the background-gradient is getting shifted up with background-position: -15px, and you are seeing the background-color underneath.
To fix this set your background-color to the bottom color of your button gradient on hover:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
If you have a set a background image for a button, the background shifts up by 15px on hover. You can set it to 0px.
.tour_btn:hover {
background-position: 0px !important;
}
When using custom css instead of LESS to style your buttons, try http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. You will get all css for your custom buttons including hover effect and disabled / active states.
For the button above you could use possible:
.btn-custom-lighten.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f29461;
background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
border-color: #f5a77d #f5a77d #ef7736;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #f5a77d;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
color: #ffffff;
background-color: #f5a77d;
*background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
background-color: #f1874e ;
}
usage:
<button class="btn btn-custom-lighten btn-large">Your button</button>
Add the CSS below /after your bootstrap(.min).css
Using this css let's you custom button effects work in most browsers.
you can specify what you want the CSS to be when a button is hovered with the css :hover property.
So in your case you will want to do something like
.tour_btn:hover {
/* your custom css */
}
Using chrome developer tools you should be able to see what kind of gradients are currently being applied by bootstrap and then override them with your css.
.tour_btn:hover {
background-color: #a35b35;
background-position: 30px 30px;
}
i found this solution you can try this . it works with simple code
So I'm using this: border-left:1px solid rgba(96, 96, 96, 0.61); of course is not working on IE, and I found this site: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer that converts RGBA values for IE, now how I adapt the code below with border-left?
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#9B606060,endColorstr=#9B606060)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9B606060,endColorstr=#9B606060); /* IE6 & 7 */
zoom: 1;
}
to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
</style>