I have a custom element which has an iron-overlay-backdrop as a child element (inside a paper-dialog). I am trying to increase the fade time (which I can do if I can edit the css in chrome). When I try and apply changes to the style --iron-overlay-backdrop the changes are not being applied in the child. What I have is:
<style>
:host {
--iron-overlay-backdrop: {transition: opacity 5s;};
}
</style>
I have also tried something simpler with --iron-overlay-backdrop-opacity: 0.8 which does not work either. For some reason the style is not being applied. Does anyone know what I am doing wrong, or how I can get the desired behavior of a longer transition time?
The custom property for the overlay backdrop is : --iron-overlay-backdrop-opacity
you can set the opacity of the host and it's transition this way
:host{
opacity: var(--iron-overlay-backdrop-opacity, 0.8);
transition: opacity 5s;
}
Related
Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO
I am using the below CSS to create a hover opacity for images. I'd like to be able to set a minimum allowance so only images of a certain size take on the opacity.
Ex. My 225x225 images are correctly taking on the opacity, but so is my large header image. I only want images 225x225 and below to take on opacity when hovered over, not all.
img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img:hover {
opacity: .8;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
Thanks for any help!
You can't use media queries on a single element, so you are left to use JavaScript here. There are new CSS rules in the making for this, but it's not reliable to use them at this point.
What you could do is add a listener the img tags with jQuery and review the CSS on page-load. If the image's size does not meet your requirements towards the opacity level, you could cap it.
As Allendar pointed out in his answer; use JavaScript for this, however if JavaScript isn't an option then you'll have to make a class and add that CSS class to each element you want to have the opacity effect on hover.
I have this JS Fiddle that works well, making my custom title display on mouseover and hide on mouseout. The problem I am having when transporting it to real world environment is that the ~ tilde selector doesn't work anymore. Is there another way to do this? My .message div is at very end of page ( as I had to close SVG tags first ), so I know the + plus selector won't work.
I realized that the real problem on my webpage as opposed to the fiddle is that my button class items are svg elements and while the tilde targeting works properly if the two elements are non svg, it doesn't work properly if one element is svg and the other isn't.
I added an svg element of the same class "button" to the Fiddle to demonstrate this issue.
If anyone can show me how to properly target this, I will be most grateful.
JS Fiddle Here
.button:hover ~ .message {
opacity: 1;
transition: opacity .6s ease-in;
-moz-transition: opacity .6s ease-in;
-webkit-transition: opacity .6s ease-in;
}
Am I missing something? Is there a reason you can't just apply class="button" to the SVG? It seems to achieve what you are after.
Demo here
Update
Instead of trying to achieve the message show with pure CSS, just use a little extra jQuery. Add a class to the message element when you mouseover "button".
$('.message').addClass("visible-message");
Then remove it again when you mouseout.
Demo here
I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.