I have a div with a background image. Using js I switch the class on that div to chaneg the background. I would like a smooth switch - not so abrupt as just switching. I am having difficulties with CSS transitions. Not sure I am using them right in this case. I can do changes with :hover but this doesn't seem to work. As a side note I am using Angular ngClass to switch these classes and I see there is perhaps some use for ngAnimate...
.waiting {
background-image: url("/images/waiting.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
.uploading {
background-image: url("/images/uploading.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
div{position:relative;}
div:after,
div:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity: 0;
background-image: url("/images/waiting.png");
-webkit-transition: opacity 10s ease-in-out;
-moz-transition: opacity 10s ease-in-out;
-o-transition: opacity 10s ease-in-out;
transition: opacity 10s ease-in-out;
}
div:before{background-image: url("/images/uploading.png");}
div.waiting:after{opacity:1;}
div.uploading:before{opacity: 1;}
Like this? jsFiddle
div {
width:300px;
height:300px;
}
.waiting, .waiting > span {
background-image: url("http://static3.fjcdn.com/thumbnails/comments/feels+man+_96209287ce84931447c2d1b56fd3ef29.jpg");
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
display:block;
}
.waiting > span {
cursor:pointer;
opacity:0;
width:300px;
height:300px;
background-size:contain;
}
.waiting span:hover {
opacity:1;
background-image: url("http://media.tumblr.com/tumblr_m1wo3uPxfH1qzfo1i.png");
}
Related
I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?
CODE:
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#description a {
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
#sidebar:hover #description {
opacity:0.6;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
Try this...
#description {
opacity:0;
background:#fff;
z-index:30;
position:fixed;
margin-left:249px;
margin-top:-5px;
border:1px solid #000;
width:230px;
height:299px;
color:{color:text};
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#description a { color:{color:text}; }
#description:hover { opacity:0.6; }
Tried it itself in my code.
Just get rid off opacity and it will work.
See youtiming dot com for demo.
'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp
Here is a live example on fiddle I just made
This is the HTML Markup
<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>
This is the CSS
.kid {
max-width:250px;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}
Fiddle here: https://jsfiddle.net/cdsaekv9/7/
I have have an image which its background color changes when hover.
It takes 1 second to change the colour, but as soon as the courser moves out of the image it changes back without any effect.
How can I have an effect for to fade out the background colour?
CSS:
.latestTrack {
margin:80px 0 0 0 !important;
}
.latestTrack img {
float:right;
margin-right:50px !important;
}
.latestTrack img:hover
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color:#f7710f;
}
HTML:
<img src="img/SocIco/soundcloud-large.png" />
You forgot the easing out part:
.latestTrack img {
float:right;
margin-right:50px !important;
-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;
}
jsFiddle example here.
I have .css which makes mine image darker on hover:
a.darken {
display: inline-block;
background: #222222;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.1;
}
I wonder how could I change it that it would be darkened on normal state and would be normal on hover?
Move the opacity: 0.1 to the normal state and revert it to 1.0 on hover:
a.darken img {
display: block;
opacity: 0.1;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 1.0;
}
I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover.
I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.
Here is a simplified version to it with JSFiddle
I recommend you to use an unordered list for your image gallery.
You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.
#photos li {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
#photos li:hover {
opacity: 1;
}
This will do the trick
.gallery-item
{
opacity:1;
}
.gallery-item:hover
{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
In this website I am making there is an arrow link that when you hover over it it becomes a new image with a cool addition to the image. I had this working completely fine with this code below and I did not edit the code at all but it seems that when I woke up the "all" transition no longer works for this. I can't find what is wrong. I am also using this to fade a background-image that is a solid color to fade to another background image that is a different solid color.
a.visitarrow
{
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visit.png');
}
a.visitarrow:hover
{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visithover.png');
}
I believe this should work:
a.visitarrow {
display: block;
width: 130;
height: 121;
-webkit-transition: 1.0s ease-in-out;
-moz-transition: 1.0s ease-in-out;
-o-transition: 1.0s ease-in-out;
-ms-transition: 1.0s ease-in-out;
transition: 1.0s ease-in-out;
background-image: url('pictures/visit.png');
}
a.visitarrow:hover {
background-image: url('pictures/visithover.png');
}