I have an some images with hover effects, for example they change the bgcolor of the body.
I want a transition bewtween the colors, but i'm too dumb.
I'm trying to use this, but it still does not show a transition.
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
You're not dumb! Just need some practice. What you have is fine I just can't see the rest of your code. But this is what you're looking for:
div {
display: block;
width: 100px;
height: 100px;
background-color: red;
transition: background-color 1000ms linear;
}
div:hover {
background-color: green;
}
<div>
</div>
You can do it this way:
.x {
width: 300px;
height: 200px;
background-color: #fa0;
transition: 1000ms linear;
}
.x:hover {
background-color: #0af;
}
<div class="x"></div>
The important thing is to put the transition parameter into the rule for the element itself, and not to write the background-color into the transition value. The hover rule only defines the second color for the transition.
Related
I have added transition to my buttons and it works fine
I have a div with width/height defined inline via props (react), the transition code looks very similar to the button so I'm unsure why it isn't wokring. For this example I just want a simple transition from a white background to red when you hover.
I have set the background color to white initially and :hover to red:
background-color: red;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
However this results in the expected result.. without any transition
I have tried changing the width on hover and setting tranisition: all 1s but it works without any transition again.. Why is this happening?
Thanks
Thanks for the fast responses. My apologies for the missing details. Turns out it was because the AOS (animation on scroll) library causes issues if doing transitions on the same element. I solved this by wrapping the div in another div.
It would help if you showed more of what you have on the hover, but I'm assuming that maybe you have the code set something like this:
.box{
background-color: red;
}
.box:hover{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
It should be like this:
.box{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
Usually, the transition is given to the element.
Try this instead -
Css
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
}
div:hover {
background-color: red;
}
Sass -
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
&:hover {
background-color: red;
}
}
Try this, if set initially white to div background. Default it is white.
so, we can add transition , then hover the background change to red
CSS
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
SCSS
.box{
transition: background-color 0.5s;
&:hover{
background-color: red;
}
}
Try this snippet.
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
<div class="box" style="width:100vh;height:100vh;"></div>
I want to avoid some of the transition effects on the element (for example: opacity). I should use opacity 0s, because this should be the default value or in other words transition will have no effect on this. But it's not working this way. This is what I tried:
div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0s;
transition: all 2s, opacity 0s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>
div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0.1s;
transition: all 2s, opacity 0.1s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>
However, if 0s of the opacity changed to 0.1s, it will work(with duration of 0.1s), is there a way to "disable" the animation in some other way, perhaps, so it will work without even a small value as 0.1s?
Here is an solution for this
transition: all 2s, opacity 1ms;
As 0s is not valid time for this (I don't know why this). and 1ms is very small time likely to 0s for human eye.
And for your current problem you can also use transition: width 2s which is only applicable for width.
On the image hover, I want to display a different small image on it with a background and opacity so that the original image is still visible. I want to use the transition to slow the hover effect.
So here's what I'm trying and not working:
HTML:
<img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" />
CSS:
.test {
background: red url("http://i50.tinypic.com/10mue4k.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.test:hover {
opacity: 0.5;
}
JS Fiddle:
http://jsfiddle.net/AXQW4/2/
Can someone please help me with this?
You'll need an additional wrapper for this. Exactly the size of the image, and give that the background. Then, when you hover over the image, you hide it and the underlying background is revealed.
Live example
HTML
<div class="background">
<img src="http://i50.tinypic.com/2poy3kl.jpg">
</div>
CSS
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
}
.background {
background: url("http://i50.tinypic.com/10mue4k.png");
display: inline-block;
font-size: 0;
}
.background img {
-webkit-transition: all .5s;
}
.background img:hover {
opacity: 0.5;
}
No need to know the exact dimensions of the image.
Is this something you were looking for: http://jsfiddle.net/AXQW4/3/
One more demo :)
http://jsfiddle.net/AXQW4/7/
Is this what you want Demo
Or this LINK
.test {
background: red url("http://i50.tinypic.com/10mue4k.png");
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.test:hover {
opacity:.5;
}
I have a css image hover effect, in which the image in the div turns to 0 opacity and then the background image is displayed. This means as your hover, one image fades out and the other appears.
This effect uses CSS and webkit.
But the issue is that when you hover over the image the effect takes place but not in reverse, meaning it does not fade in when you leave the image. But that is the effect I want.
This is the HTML markup...
<div id="info"><img src="infow1.png" width="800" height="800" /></div>
This is the CSS markup...
#info {
background: url(infow2.png) 0 0 no-repeat;
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -400px;
width: 800px;
height: 800px;
z-index:100;
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#info img:hover{
opacity:0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
So overall I want the infow.png to fade out, when hover over the image then fade back in when you leave.
Is this what you are looking for?
HTML:
<img src="infow1.png" class="fadeOut">
CSS3:
.fadeOut {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fadeOut:hover {
opacity: 0;
}
JS Fiddle: http://jsfiddle.net/AXQW4/1/
EDIT: If you want to display a different image when hovering, you can add it as a background-image behind the original: http://jsfiddle.net/8qzcY/
You've created no rules that apply to the unhovered-image, so if you create some rules, as such:
#info img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
JS Fiddle demo.
It should work as you wish.
For contrast, the same demo without the unhovered #info img rules: JS Fiddle demo, which seems to match your description.
What I'm trying to do here is get a transition when this div is hovered over.
Everything works fine, its just the transition that does nothing. I've tried using the transition properties with transition: all, transition: opacity and transition: background. But none of them work.
It's the display property that's doing it. Because when I take that out, it works. How else can I get around this? Because I obviously want to keep the display property, as it works on all browsers, young and old.
Here's what I've got at the moment:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0);
color: #fff;
display: none;
-webkit-transition: background 2s;
-o-transition: background 2s;
-moz-transition: background 2s;
transition: background 2s;
}
a:hover .matrix-overlay {
display: block;
background: rgba(0,0,0,0.5);
}
I don't mind if I'm using opacity or background or whatever to control the fading, I just don't know what else to do.
Looks like the display property isn't supported with CSS transitions (also see this SO question).
With that in mind, you have several options. You could initially set the width/height to 0 in your pre-transition, or offset the element off the page (something like margin-left: -9999px;), or set the opacity to 0.
In your case, I would probably use this:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0);
color: #fff;
display: block;
margin-left: -9999px; /* hide element off the page */
-webkit-transition: background 2s;
-o-transition: background 2s;
-moz-transition: background 2s;
transition: background 2s;
}
a:hover .matrix-overlay {
margin-left: 0; /* reset element position */
background: rgba(0,0,0,0.5);
}
Here's what I ended up doing:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0.7);
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease 0s;
-o-transition: opacity 0.2s ease 0s;
-moz-transition: opacity 0.2s ease 0s;
transition: opacity 0.2s ease 0s;
}
a:hover .matrix-overlay {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
-moz-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
you could use clip instead of display, as the element is absolutely positioned
Working Example
e.g.
.matrix-overlay {
...other properties, not display ...
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px,1px,1px,1px);
}
a:hover .matrix-overlay {
..other properties, not display ...
clip: rect(auto); /* IE7 */
clip: auto;
}
I put in the quirky IE7 code clip code for information, although IE doesn't do transitions anyway and you could feed it the display codes if you wanted to, but this way keeps them the same ;)
You can try the following:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0.7);
color: #fff;
opacity: 0;
pointer-events:none;
transition: opacity 0.2s ease 0s;
}
a:hover .matrix-overlay {
pointer-events:auto;
opacity: 1;
transition: opacity 0.15s ease 0s;
}
Using pointer-events:none and opacity:0 together will have nearly the same effect as display:none, but now the transition should work fine.