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/
Related
I've been struggling with creating a page on which I can display multiple images which, on hover, will enlarge approximately 80% of the page width.
To do this, based on the answers of other questions on here, I have used transform: scale ().
The problem I face is that this seems to result in the images overlapping when enlarged.
What I'm hoping to achieve is for the images to push each other down the page when enlarging, rather than going over or under.
Please excuse my messing attempt at solving this. Coding in general is very new to me.
https://jsfiddle.net/msandford/zjrc7v6s/
.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
z-index:1;
}
Thanks in advance.
The scale() function keeps the bounding box of the original element thus not pushing the other images, I could have played around with adding a margin (top and bottom) but then the image jumps around so I opted for just using the width property (why not? what was your initial question that led to scale()?)
#scale {
text-align: center; /* to align all inline content inside the div */
}
#scale img {
width: 150px;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#scale img:hover {
width: 80%;
}
<div id="scale">
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
<img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>
Also I think I should point out that you were using classes wrong.
A class is a string that you would apply to all of the images and then you can do .scalethis{} in css to apply that to all of your images at once.
How you were using it was like how you should use id
I have the following style on hover:
li:hover a {
left: 65px;
}
I know I can animate this with jQuery, but can it be animated with CSS3 alone?
This did not work:
li:hover a {
left: 65px;
-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;
}
You have to use this css:
li:hover {
left: 0px;
}
li:hover a {
left: 65px;
-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;
}
you have to set position if you want to use 'left' otherwise use 'margin-left'
here is an example: FIDDLE
i have this code
http://jsfiddle.net/d2QwG/
When user hover on image after 1 sec the others change opacity:0.4.
But when the user goes to another image i want all the images to return to opacity:1and if he again hover over a sec the others to change opacity:0.4.
I understand that the rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
makes the problem but i want to keep this rule for another transition that i make when some <li> items are moving.
I want the visual result like i didnt have the above CSS rule but without deleting it.
I dont mind using javascipt,jquery.
EDIT:
I want this result:
http://jsfiddle.net/KJ8T4/
but i want also to have this CSS rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Pure CSS solution:
LIVE DEMO
#tiles{
margin:0;
list-style:none;
display:table;
border-collapse:collapse;
}
#tiles li {
vertical-align:middle;
display:table-cell;
padding:5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tiles li img{
vertical-align:middle;
}
#tiles:hover li{
opacity: 0.4;
}
#tiles li:hover{
opacity: 1;
}
You could to use JavaScript or jQuery for that.
Here's a Fiddle.
$('li').on("mouseout", function() {
$('img').css('opacity', '1');
});
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");
}
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.