I'm trying to make a background color transition, where element A's color will switch to another color on hover. But A's color is already switched without hovering on it.
.A
{
background-color: #1A1A1F;
}
.A:hover
{
background-color: #424242;
transition: background-color,0.5s ;
-o-transition: background-color, 0.5s ;
-moz-transition: background-color, 0.5s;
-webkit-transition: background-color, 0.5s;
cursor: pointer;
}
Here A's color should be #1A1A1F by default and switch to #424242 when you hover on it, but instead of being the default color, it's already changed without hovering on it.
First of all, you should put the transition in the main selector in :hover selector, puting the transition in :hover will give you a different result.
Second, the transition should be defined like : transition: background-color 0.5s;, no comma in between. You should put the comma when you have different transitions like : transition: background-color .5s, width 1s;.
If you have multiple transitions and you want to give them the same transition duration you can use all or not give a property name like transition: all 1s; or transition: 1s;.
Anyways, your code should be like this:
.A{
background-color:#1A1A1F;
transition: background-color .5s;
}
.A:hover{
background-color:#424242;
}
Related
I have a Wordpress website which uses the Dune theme from Zigzagpress.
You can check the site here.
What I want to do is, when hovering over an image, remove the grey layer that the post_image_overlay div has.
I've tried doing it by adding this custom css to the file provided in the theme to do so, custom.css, which gets loaded along with the theme's css:
.post_image_overlay {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.post_image_overlay:hover {
opacity: 0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
But this doesn't seem to make any difference. In fact, with the Chrome inspector and the custom.css file properly loaded, I can see my custom css rules in the .post_image_overlay (for example, if I change the opacity to 0.5, the background is not as dark), but I can't see the .post_image_overlay:hover anywhere. I've even tried to add it directly in the Chrome inspector, but it gets greyed out:
I'd post a JSFiddle but I believe the problem lies beneath some other CSS in the page which is conflicting with my custom one, so I guess it's better to check it live.
BONUS POINTS: Ideally, I'd love to have the background fading out only when the user hovered over the entry title (h2.entry-title), not all the image, but I don't really know if that can be done.
The reason it's not working is because your .entry-content-title has a z-index: 1002; style, which means it's sitting over the top of your .post_image_overlay and therefore you're not hovering over it.
I'm seeing if there is a way to blur out your background for a few seconds then have it come into view. I was trying to play around with the blur attribute and the transition attribute but I was not getting the results I was getting. I tried something like this on my css
body{
background:black;
-webkit-filter: blur(10px);
}
.body{
margin:0 auto;
width:95%;`enter code here`
clear:both;
transition:body 2s ease-in-out;
}
Any suggestions?
Presumably you don't have a class named "body" so the period in your second selector is an error. Also, you have the syntax wrong for transition. The first value is the property to transition, not a selector. And, depending on the level of support you require, you need vendor prefixes on both the transition property and the property being transitioned, e.g.
body {
-webkit-transition: -webkit-filter 2s ease-in-out;
}
BTW, I'm not sure if -filter is an animatable property.
Fiddle: http://jsfiddle.net/Bushwazi/sHL9m/3/
1) Use all in the transition
2) Despite what the prefixes lead you to believe, this didn't work in all browsers
3) But it did work the same for backgrounds and img
I change a class using javascript, css handles the rest.
.filter {
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-o-filter:blur(10px);
-ms-filter:blur(10px);
-webkit-transition: all 5.0s linear 1.0s;
-moz-transition: all 5.0s linear 1.0s;
-ms-transition: all 5.0s linear 1.0s;
-o-transition: all 5.0s linear 1.0s;
transition: all 5.0s linear 1.0s;
}
.filter.animae {
filter:blur(0px);
-webkit-filter:blur(0px);
-moz-filter:blur(0px);
-o-filter:blur(0px);
-ms-filter:blur(0px);
}
.bg {
display:inline-block;
width:360px;
height:424px;
background:url(http://gruntjs.com/img/grunt-logo.svg);
}
I have a CSS file separate from the main CSS file for a page. Essentially there are three hyperlinks each with their own p tags, one under the other, and each has their own divs for specifying the webkit transition color for when they highlight. The colors all work great until the end of the webkit transition, at which point all three links change color to the color specified in the last class on the CSS (gray). I tried excluding that last class, and sure enough, the final color for all links became the color specified in the new "last class" (blue).
This happens only when I have visited the link, works fine when I clear cookies and don't click on any of the links. So it seems like something with a:visited, but as you can see, I have that covered (I think...).
Here's the CSS:
.orangelink a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.bluelink a:link:hover,a:hover,a:visited:hover {
color: #7290a4;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.graylink a:link:hover,a:hover,a:visited:hover {
color: #b0afaf;
text-decoration:none;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
Seems like I'm missing something small... To be clear, there is no interference from the main CSS file, a isn't defined at all except for the color of hyperlinks when they are inactive.
In your declarations, you only state the parent's class of the a:link:hover...
.graylink a:link:hover,
.graylink a:hover,
.graylink a:visited:hover{
color: #b0afaf;
text-decoration:none;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
This will make the gray behave correctly, do the same for other colors and bingo.
http://coreytegeler.com/new/ click on the up arrow and hover over the figure to see what I'm talking about
Ok so I am trying to create an inversion effect on hover of the silhouette, I've gotten all the CSS to change accordingly and used some minor JS to replace the image but the fading transition for the image goes much quicker than everything else. Even when setting the time to far more than it should be it does not seem to effecting it.
You should be able to see my style sheet at the link below, it's pretty tiny but I figured I'd let you guys see it all instead of the specific lines I'm talking about because I believe there could be a conflict.
http://coreytegeler.com/new/css/style.css
#shadow {
width:33%;
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
#shadow:hover {
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
Your code is not working on :hover because you simply change source of img. CSS has nothing to do with it.
You can place image in a div and set other image as div's background-image. Then on hover just reduce opacity to 0.
Demo
EDIT
In future you can use CSS filter property. Currently its supported by just -webkit. It'll be as simple as
img {
filter: invert(100%);
}
and you're done. But currently its just
img {
-webkit-filter: invert(100%);`
/*-moz -o -ms all are unimplimented*/
}
Proof of concept (Use chrome or safari to see the effect)
+filter(W3C)
I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this:
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
div {
.transition(all .5s);
}
The example above works fine, however I also have things like that:
div {
-webkit-transition: border-color .3s, background .3s;
}
And I can’t call the mixin as .transition(border-color .3s, background .3s) because it has more arguments than defined in the mixin. So what I am doing at the moment is this:
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
.transition-2(#1, #2) {
-webkit-transition: #1, #2;
-moz-transition: #1, #2;
}
div {
.transition-2(border-color .3s, background .3s);
}
This is annoying, I need to add redundant code in my sheet any time I’m using a number of arguments not previously used before; and I have this problem with others CSS3 properties too, for example box-shadow when I need to add inset at the beginning.
Is there any way to declare mixins flexible in their number of arguments with Less, just like CSS3 properties are?
For this case, the redundant mixin code can be avoided using any one of the below mentioned options.
Option 1: (Simplest solution - thanks to seven-phases-max for highlighting the miss)
We can use semi-colon as a separator/delimiter for arguments and when we add a semi-colon at the end after specifying all properties that need to be transitioned (in a comma separated format), the whole part before it would be considered as one single argument.
Extract from the official Less website:
Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
div{
.transition(border-color .5s, background .3s, color .3s;);
}
So the above code when compiled would result in
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
Option 2:
Pass the input values to the mixin (how many ever specific properties need to be transitioned) within quotes. Within the mixin, use the ~ or the e() in-built functions to strip the quotes.
.transition(#1) {
-webkit-transition: ~"#{1}";
-moz-transition: ~"#{1}";
}
div {
.transition("border-color .5s, background .3s");
}
div#sample2 {
.transition("border-color .3s, background .3s, color .3s");
}
will produce the below CSS when compiled
div {
-webkit-transition: border-color .5s, background .3s;
-moz-transition: border-color .5s, background .3s;
}
div#sample2 {
-webkit-transition: border-color .3s, background .3s, color .3s;
-moz-transition: border-color .3s, background .3s, color .3s;
}
Option 3:
Less does allow creation of mixins which allow/accept variable number of inputs using the ... option. Hence you can use the same mixin as in your original code by adding the ... to the input variable and calling it as you had originally wanted.
.transition(#args...) {
-webkit-transition: #args;
-moz-transition: #args;
}
div {
.transition(border-color .5s, background .3s);
}
The above will compile successfully but the only problem is that it would produce the below output when compiled. As you can see, the problem is that the parameter values are space separated and not comma separated (as they should be for the CSS to work properly).
div {
-webkit-transition: border-color 0.5s background 0.3s;
-moz-transition: border-color 0.5s background 0.3s;
}
Ofcourse we could write complex replace functions using regular expressions but that would really make the code messy. Instead we could use loops and some built-in functions to achieve the required output (like shown below).
.transition(#args...) {
.loop-args(#argCount) when (#argCount > 0) {
.loop-args(#argCount - 1);
#arg: extract(#args, #argCount);
-webkit-transition+: #arg;
-moz-transition+: #arg;
}
.loop-args(length(#args));
}
div {
.transition(border-color .5s, background .3s, color .3s);
}
Basically what we are doing is use the ... to accept multiple arguments as input to the mixin and then loop over each argument and add it to the CSS property's value. The +: (merge function introduced in Less v1.5.0) is used to produce the comma separated output.
When compiled, it would produce the below output:
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
You could try
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
.transition-2(#1, #2) {
.transition(#1); // this includes all the stuff from transition(#1)
color:red; // additional stuff
}
As for your actual question, I dont believe that LESS itself has any sort of "rest" style arguments passing.