I'm quite a noob when it comes to CSS and HTML stuff, but I have been able to tweak our Wordpress website quite well so far.... as long as nothing too technical is needed.
I have this code for images to fade on hover which I copied from another answered question:
img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
What I want is for this fade hover effect to work only on images with links. Right now it affects all my images, even those with no links.
I tried doing
a.img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
a.img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
but it did not work at all.
Any simple way to fix this?
Instead of using a.img please use a > img
So in your code
a > img{
//... your code
}
a > img:hover{
//... your code
}
The image is a child of the link, so your CSS selectors need to be a img {...} and a img:hover {...} - with a space between the two. Also a > img {...} and a > img:hover {...} is possible (which requires it to be a direct child).
So I did this for my graphic design portfolio. And on my "Photo editing" page I made div which shows the photo before the editing, and when you hover on the image it shows the edited photo. The problem is that 50% of the time when I hover on the photo it blinks to the photo instead of smooth transition.
CSS:
#photo {
background-image:url(../content/images/Editing/1.jpg);
background-size:104%;
-webkit-transition: background-image 0.3s ease-out;
-moz-transition: background-image 0.3s ease-out;
-o-transition: background-image 0.3s ease-out;
transition: background-image 0.3s ease-out;
}
#photo:hover {
background-image:url(../content/images/Editing/1a.jpg);
}
I am trying to apply an ease in ease out (with a fade) in the navigation as it scrolls between each section of my one page scrolling site. It is currently working on the transition from the first section (welcome) to the second section (mission).
I am using squarespace and am doing custom CSS overrides to the elements I want to change. I can see that there are some negations in squarespace's CSS for the transitions, is there a way for me to override this?
Demo Site
The code is as follows:
body:not(.always-use-overlay-nav) .nav-wrapper nav>div a,
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div a,
body:not(.always-use-overlay-nav) .nav-wrapper nav>div label,
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div label {
-webkit-transition: color .1s 0s ease-in-out;
-moz-transition: color .1s 0s ease-in-out;
-ms-transition: color .1s 0s ease-in-out;
-o-transition: color .1s 0s ease-in-out;
transition: color .1s 0s ease-in-out;}
For some reason all of the transitions are being "crossed-out" when I inspect the element on my site.
I have in my CSS file the following code, which globally turns on transitions on all links for all CSS properties on anchor elements:
a{
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
Later in CSS file, I would like to turn off transition on specific links (let's say with class notrans) but only for background-position.
Something like:
a.notrans{
-webkit-transition: background-position 0;
-moz-transition: background-position 0;
-o-transition: background-position 0;
-ms-transition: background-position 0;
transition: background-position 0;
}
But this code does not work.
I must turn background-position transition and keep other transitions, so sprite - background image would not move on a.notrans ...
You just have to declare new property for transitions, and old inherited ones are gone.
So, i just used this>
a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}
After this, only color transition is working!
Maybe there is better solution ?
So I have the following CSS transitions attached to an element:
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease-in;
}
Is there a way to disable these inherited transitions on specific elements?
a.tags { transition: none; }
Doesn't seem to be doing the job.
The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following HTML:
Content
Content
Content
Content
...and CSS:
a {
color: #f90;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
color: #f00;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
JS Fiddle demo.
Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.
The specific adaptation to Opera is the use of -o-transition: color 0 ease-in; which targets the same property as specified in the other transition rules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransition selector is simply to provide a specific selector for the elements without transitions.
Edited to note that #Frédéric Hamidi's answer, using all (for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.
Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, following self-deletion of #Frédéric's answer.
If you want to disable a single transition property, you can do:
transition: color 0s;
(since a zero second transition is the same as no transition.)
Another way to remove all transitions is with the unset keyword:
a.tags {
transition: unset;
}
When used with the transition property, unset is equivalent to initial, since transition is not an inherited property:
a.tags {
transition: initial;
}
A reader who knows about unset and initial can tell that these solutions are correct immediately, without having to think about the specific syntax of transition.
Additionally there is a possibility to set a list of properties that will get transitioned by setting the property transition-property: width, height;, more details here
You could also disinherit all transitions inside a containing element:
CSS:
.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
HTML:
Content
Content
<div class="noTrans">
Content
</div>
Content
Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.
Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp