I am trying to add transition, but can't make it work. My hover works slightly different, as it is targeting different class to change, it's:
.news-thumbnail:hover > .news-description-container{
padding: 1.5rem 2rem;
height: 21rem;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
Edit: adding original class
.news-description-container{
position:absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
background-color: white;
padding:2.5rem 2rem;
text-align: left;
height: 15.5rem;
}
Which makes this:
https://i.stack.imgur.com/DyeOS.png
Into this when you hover it(news-thumbnail), simply white area(news-description-container) slides up:
https://i.stack.imgur.com/Q6mxf.png
How can I make the transition work for this one? I just want it to slide up and down, not appear/disappear without transition.
Maybe I did it wrong and shouldn't do it this way?
Didn't found anything after googling, so it might be useful for others.
Thanks!
See Here... You can use same style hover transition.
Just change few parameters and thats it...
See code [Here]1
Related
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
This pretty simple JSFiddle (http://jsfiddle.net/AndyMP/sj2Kn/) changes the background colour of a block on 'hover', but how do I get it to fadein/fadeout?
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.block:hover {
background-color: #333;
}
You need to use transition property
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
-webkit-transition: background .5s; /* For webkits */
transition: background .5s;
}
Demo
The property is simple, the first parameter you pass is the property you want to animate, so say you want to animate the height you can pass the height or you can use all as the value if you want to transit all the properties which are transitional, and the next parameter is the time we set for the transition, you can set as 1s, 2s and so on where S stands for seconds.
It's worth noting that the property am using is a short hand property for the following properties
transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease
Where in the above example we are using the transition-property and transition-duration, default values are used for other properties.
Demo Fiddle
Add transition:background 200ms ease-in; to .block
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition:background 200ms ease-in;
}
Where 200ms is the amount of time you wish the fade to take.
The CSS property transition defines you want an animation to take place, the three following parts are the specific property you want to transition (can be set to all), the speed, and the animation timing function.
More on CSS transitions from MDN
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
JSFIDDLE
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
.block:hover {
background-color: #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}