I am transitioning a couple of background images. However, I am noticing that when if the user acts before the transition has fully taken affect, the transition is instant.
For example, I hover over the div and the image takes 1 second to completely transition. However, I remove the cursor .5s into the transition. So it transitions back to the original image but instead of smoothly transitioning, it changes instantly. How do I make it smooth at all times?
.class {
width:500px;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
.class:hover {
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
<div class="class"></div>
http://codepen.io/john84/pen/vEdPEW
fiddle
I changed ease to ease-in-out
edit: Firefox doesn't support this, but there are many workarounds, example:
fiddle
HTML:
<div class="class"></div>
<div class="class2"></div>
CSS:
.class {
position:absolute;
width:500px;
transition:all 500ms;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
}
.class2{
width:500px;
height:500px;
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
.class:hover {
opacity:0;
}
Related
This question already has an answer here:
Change Background-Color of div element Cross Fade in a Loop
(1 answer)
Closed 7 years ago.
hello guys i running a fade effect with css, works perfect, i want change the color when get the fade but i had no success.
the fade change color if i use without image, but if i using with i image does not work.
example:
i tried :
background-color: red;
but i had no success, anyway somebody know how can make the fade backgroundbe a different color? right now just going to white, its possible do another color?
right now i have a image and whe i hover the mouse appear a fade white effect, i just wanna change the white to red.
php:
<img id="slide-img-1" src="<?php echo get_bloginfo('template_directory');?>/public/images/get_.jpg" class="slide fade " alt="" />
css:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
Here's a Fiddle that overlays a background: red; over a div containing your image of choice.
HTML
<div class="box fade"><img src="http://placehold.it/350x150"></div>
CSS
.box {
width:350px;
height:150px;
}
.fade {
position: relative;
}
.fade:after {
background-color: red;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover:after {
opacity: .5;
}
I've been writing this website for a few days now and have gotten into trouble with my logo position. I can't seem to move it not matter how much I try. Can anyone suggest how I can do this? PS. (I'm still learning css.)
HTML:
<div class="logofx">
<img src="images\logo.png">
</div>
CSS:
.logofx img {
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.logofx img:hover {
-webkit-filter: hue-rotate(333deg);
}
You need position:relative, position:absolute or position:fixed (depending on the specific desired effect*).
By default, elements have position:static and statically-positioned elements are unaffected by left/top/right/bottom adjustments.
*Effects:
position:relative moves the element by the amount specified, but other elements behave like it hasn't moved. If you want other elements to move too, consider using margin properties instead.
position:absolute moves the element to be placed relative to the nearest position:relative container (or the whole document, if there is none).
position:fixed fixes the element in the browser window, using the left/top as coordinates.
Set position: fixed
.logofx img {
position: fixed;
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
what about margins instead?
.logofx img {
margin:300px 0 0 50px;
display:block;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
HTMl:
<div class="logo"><div class="logofx">
<img src="images\logo.png">
</div>
</div>
CSS:
.logo{position:relative;}
.logofx{position:absolute; top:10px; left:10px;}
Try this code this will help you .Kindly put the top and left at correct pixel or move where you want using top and left property.
I just created an css3 animation and I have a problem.
When I hover over my text, above appear a line and everything may have to be great, but I don't know how to move this line at the bottom of text.
I've trying with transform:translateX but it does not help.
There is my code:
.line
{
font-family:Tahoma;
width:0px;
height:1px;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */
}
div:hover
{
width:85px;
}
http://jsfiddle.net/DashDesign/SD58Z/1
Move the inner div one pixel to the top, give it an opaque background and remove the height restriction from the parent div.
.line div{
background:#fff;
position:relative;
bottom:1px;
}
Example
I have this code that works great. When I pass the mouse over the image it crossfades to another image.
What I want is: when I pass over the mouse the image crossfade and rest like this, I mean, make only 1 transition.
1)image 1
2)onmouseover image 2
3)onmouse out image 2
here my code:
<div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>
here my css code:
#crossfade {
position:relative;
height:250px;
width:400px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
opacity:0;
}
From what I get is that you want the :hover state to "stick". Though it's not a pure CSS solution, a solid way to handle this is if you are using jquery's .addClass.
$('.yourimage').mouseover(function() { //hover over your image to trigger the event
$(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over
});
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.