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 6 years ago.
Improve this question
I'm trying to create the classic "black" overlay on hover of an image. For some reason mine is white. Can anyone explain to me what i'm doing wrong? Here is my jsFiddle.
<img class="thumb-img">
.thumb-img:hover {
opacity:0.5;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #202020;
}
Your background-color property is never seen, since the image itself occupies the entire space of the element. Wrap it in a <div> (or similar):
.img-fade {
background-color: #202020;
float:left;
}
.img-fade img {
display: block;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-fade img:hover {
opacity:0.5;
}
<div class="img-fade">
<img src="http://placehold.it/200x200" />
</div>
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 to have multiple CSS transitions on an element?
(9 answers)
Closed 6 years ago.
Is it possible to use several css classes for transition ?
If I have this CSS :
.fade {
opacity: 0;
transition: opacity .5s linear;
}
.left {
left: 10px;
transition: left .3s ease;
}
Then I can't use the 2 classes on 1 html element, one transition property will override the other. I know I could create a class .fade-left which would do both (see this question), but I'd like to keep this modularity.
Is there a way to add both transitions ?
You need to use this way for using multiple transitions:
transition: opacity .5s linear, left .3s ease;
Expanded way:
-webkit-transition: opacity .5s linear, left .3s ease;
-moz-transition: opacity .5s linear, left .3s ease;
-ms-transition: opacity .5s linear, left .3s ease;
transition: opacity .5s linear, left .3s ease;
Since the other class doesn't change the left property, you don't need to worry. In simple ways, you can use all.
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
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
Animating the background-size property doesn't seem to be working in Chrome or Safari.
div {
width: 161px;
height: 149px;
background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
background-size: 50% 50%;
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-web-kit-transition: background-size 2s ease-in
}
div:hover {
background-size: 100% 100%
}
<div>
hey
</div>
http://jsfiddle.net/ubcka/14/
You should check the browser version and whether it supports both background-size and transition. If the former, but not the latter use:
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
It's not widely supported. See a complete list of CSS properties that support transition here. I would have a different approach. Wrap your element with background-color you wanted to do transition to, and do a scale transition for your element.
<div class="your-wrapper">
<div class="your-div">
</div>
</div>
also make sure to add proper styling
.your-wrapper {
overflow:hidden
}
.your-div {
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s
}
.your-wrapper:hover .your-div{
transform: scale(1.5); -webkit-transform: scale(1.5);
}
This should do.
you need to set the background-size on the div otherwise it dosn't have a set size to animate from.
.div {
background-size: 100%; //set the original size!!!!!!!!!!!!
-webkit-transition: background-size 2s ease-in;
transition: background-size 2s ease-in;
}
.div:hover {
background-size: 110%;
}
You just need to change:
-web-kit-transition: background-size 2s ease-in;
to:
-webkit-transition: background-size 2s ease-in;
Change -web-kit- to -webkit-.
Also, you should write original CSS property after properties with a vendor-prefix (it's very important). Otherwise, if browser has implemented that CSS3 property (like transition), then original property will be replaced by property with vendor-prefix — and that is not good.
WRONG order:
transition: ...;
-webkit-transition: ...;
RIGHT order:
-webkit-transition: ...;
transition: ...;
You can also just change all the transition declarations to read like this (it's not the background but the background-size that is changing:
transition: background-size .4s ease-in-out;
I know this is a old question, but using "all" works fine for me.
-webkit-transition: all 1s;
transition: all 1s;