Heelo guys !
I need a hand with CSS.
I would like to do an effect on all the item when one of them is clicked.
#scrollBox #content .item:active (?)
{
width: 0px;
}
#scrollBox #content .item
{
width : 100%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
I don't know is there is something which could replace (?) to get what I want ?
Thanks for your help !
Related
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).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
On my site I have an aside that lets the user perform common tasks like adding an item. There are multiple steps (pages) and I want them to appear to slide in left to right using CSS.
I have tried using the empty tag and the visiblity tag to trigger the transition but it never happens.
.slideOnVisible:empty{
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.slideOnVisible:not(:empty){
height: 100%;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
I don't need to transition the height property so if there is a better way please let me know.
I am using Bootstrap, LESS and ko.js
Here is a fiddle: https://jsfiddle.net/p97wdqqm/1/
It turns out you want something like this.
var DemoModel = function() {
var self = this;
self.obsProperty = ko.observable(null);
self.toggleObsProperty = function() {
if (self.obsProperty() === null) {
self.obsProperty({
id: 1
});
} else {
self.obsProperty(null);
}
};
};
ko.applyBindings(new DemoModel());
.slideOnVisible { /* initial state */
height: 2em;
width: 0;
white-space: nowrap; /* or it would wrap during the transition */
overflow: hidden;
-webkit-transition: width 2.5s linear;
-moz-transition: width 2.5s linear;
-ms-transition: width 2.5s linear;
-o-transition: width 2.5s linear;
transition: width 2.5s linear;
}
.slideOnVisible:not(:empty) {
width: 10em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<html>
<body id="main">
<div class="slideOnVisible" data-bind="with: obsProperty">
made it
</div>
<button data-bind="click: toggleObsProperty">Toggle Property</button>
</body>
</html>
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 8 years ago.
I made a css transition which is from height auto to height: 75%.
CSS-Transition:
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
But its not working in IE and Firefox. I found some posts on google, but couldnt find a solution.
Thanks four your help.
To work with % and auto you can try with min-height like this:
div {
-webkit-transition: height 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div:hover {
min-height:75%;
}
Check this Demo Fiddle
Tested in Chrome 31 -- Firefox 26
Try this: transition example
CSS:
.tran{
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
height: 100px;
background: #e5e5e5;
height: 100%;
}
.tran:hover{
height: 300px;
}
HTML:
<div style="height: 200px;">
<div class="tran">
Example
</div>
</div>
Simple, change from height to min-height or max-height, what ever will better for your needs.
Example:Fiddle
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?
Demo here: https://jsfiddle.net/7uR8z/
You're applying transitions only to the :hover pseudo-class, and not to the element itself.
.item {
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Demo: https://jsfiddle.net/7uR8z/6/
If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :
.item:hover {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Demo: https://jsfiddle.net/7uR8z/3/
I managed to find a solution using css/jQuery that I'm comfortable with. The original issue: I had to force the visibility to be shown while animating as I have elements hanging outside the area. Doing so, made large blocks of text now hang outside the content area during animation as well.
The solution was to start the main text elements with an opacity of 0 and use addClass to inject and transition to an opacity of 1. Then removeClass when clicked on again.
I'm sure there's an all jQquery way to do this. I'm just not the guy to do it. :)
So in it's most basic form...
.slideDown().addClass("load");
.slideUp().removeClass("load");
Thanks for the help everyone.
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});
Check the fiddle: https://jsfiddle.net/2k3hfwo0/2/
I'd like to apply a CSS transition to all properties apart from background-position.
I tried to do it this way:
.csstransitions a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.csstransitions a {
-webkit-transition: background-position 0s ease 0s;
-moz-transition: background-position 0s ease 0s;
-o-transition: background-position 0s ease 0s;
-ms-transition: background-position 0s ease 0s;
transition: background-position 0s ease 0s;
}
First I set all properties to transition and then I tried to overwrite solely the transition for the background-position property.
However this seems to also reset all other properties - so basically none of the transitions seem to happen any more.
Is there a way to do this without listing all properties?
Here's a solution that also works on Firefox:
transition: all 0.3s ease, background-position 1ms;
I made a small demo: http://jsfiddle.net/aWzwh/
Hope not to be late. It is accomplished using only one line!
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
That works on Chrome. You have to separate the CSS properties with a comma.
Here is a working example: http://jsfiddle.net/H2jet/
You can try using the standard W3C way:
.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }
http://jsfiddle.net/H2jet/60/
Try this...
* {
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
a {
-webkit-transition: background-position 1ms linear;
-moz-transition: background-position 1ms linear;
-o-transition: background-position 1ms linear;
transition: background-position 1ms linear;
}
For anyone looks for a shorthand way, to add transition for all properties except for one specific property with delay, be aware of there're differences among even modern browsers.
A simple demo below shows the difference. Check out full code
div:hover {
width: 500px;
height: 500px;
border-radius: 0;
transition: all 2s, border-radius 2s 4s;
}
Chrome will "combine" the two animation (which is like I expect), like below:
While Safari "separates" it (which may not be expected):
A more compatible way is that you assign the specific transition for specific property, if you have a delay for one of them.
Try:
-webkit-transition: all .2s linear, background-position 0;
This worked for me on something similar..