This is what I have:
.box{
background:#FFF;
-webkit-transition: background 0.5s;
}
.box:hover{
background:#000;
}
But this appends to both onmouseover and onmouseout actions, but isn't there a way to control them? Something like:
-wekbkit-transition-IN: background 1s;
-webkit-transition-OUT: background 10s;
Just redifine your transition in the over pseudo element.
.box{
background: white;
-webkit-transition: background 5s;
}
.box:hover{
background: olive;
-webkit-transition: background 1s;
}
Look my http://jsfiddle.net/DoubleYo/nY8U8/
Either use an animation (only in webkit currently), or use JS to add and remove the properties, they will still animate.
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
On my website I have a second header that drifts down from the top when the user scrolls down the page. The original header remains absolutely positioned at the top and is scrolled out of sight as the second slides down.
Due to the Google Chrome bounce scroll effect, if the user scrolls up when the browser is already at the top of the page, they're able to see the second header hanging around outside the document. This looks very strange, and it only happens in Chrome.
I've been trying to make the second header invisible when the user scrolls back to the top and it slides back out of view. I have been attempting to do this with an opacity value of 0 set with an ease value. The problem is, I am using transform:translate3d to animate the slide-up / slide-down effect, and I can't get both opacity and transform to work in the same transition rule.
Ideally I'd like the following to work, but it won't for some reason.
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
opacity:0;
transition: translate 0.3s, opacity 0s ease .3s;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity:1;
transition: translate .5s, opacity 0s;
}
Here is a jsFiddle to show you what I mean – https://jsfiddle.net/wbmm0kL7/2/
At the moment I have had to set it to transition: all .3s which means that the opacity fades in and out as well, which I want to avoid.
Here is a picture of my website with the problem on Chrome I am trying to solve. Notice that the second header and the nav menu are visible when scrolling against the edge of the viewport/document.
Here is the rest of my code:
HTML
<header class="header">REGULAR HEADER</header>
<div class="transform-container">
<div class="hidden-header">HIDDEN HEADER (SLIDES DOWN ON SCROLL)</div>
</div>
<div class="content"></div>
</div>
CSS
html,
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.wrapper {
background-color:orange;
min-height:100%;
}
.header {
position:absolute;
width:100%;
height:55px;
background-color:pink;
}
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
opacity:0;
transition: all .3s;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity:1;
transition: all .5s;
}
.content {
height:2000px;
}
jQuery
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('body').addClass('header-dropdown');
} else {
$('body').removeClass('header-dropdown');
}
});
});
As per my comment, you have a typo in your CSS transitions rule. You cannot transition individual transform components. Instead, use transition: transform 0.5s; for example.
To achieve the effect of the hidden header appearing immediately, you set the transition duration of opacity to 0s when .header-dropdown is added. To achieve the effect of the hidden header hiding after the transform is done transitioning, you set the transition delay of opacity to the transition duration used:
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
/* Delay opacity transition when returning to ground state */
transition: transform 0.5s, opacity 0s 0.5s;
opacity: 0;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity: 1;
transition: transform 0.5s 0s, opacity 0s;
}
See your fixed fiddle here: https://jsfiddle.net/teddyrised/wbmm0kL7/3/
Note that the first numeric value of the transition shorthand is always the transition-duration, while the second numeric value is the transition-delay
I've just got a problem making the CSS3 animations.
I've written the following code:
#-webkit-keyframes menu_styling_hover
from
{
border-bottom-color:#F5B7B8;
padding-top:0px;
padding-bottom:0px;
}
to
{
border-bottom-color:#FB7A7D;
padding-top:6px;
padding-bottom:6px;
}
}
And I've attached this keyframe to the div with hover effect;
-webkit-animation:menu_styling_hover 0.3s linear;
animation:menu_styling_hover 0.3s linear;
It works fine. But when I unhover the element - it becomes to have previous characteristics without any animation of hiding it. So when the div is hovered, it has paddings 6px, and when I move mouse from this div - paddings become 0px without making animation (5..4..3..2..1). How to do such thing?
It seems like you are after a CSS transition as opposed to an animation.
Just set the initial styling, and change it when hovering over the element like so:
Example Here
.element {
height:40px;
border: 2px solid;
border-bottom-color:#F5B7B8;
padding-top:0px;
padding-bottom:0px;
transition: all 0.3s linear;
}
.element:hover {
border-bottom-color:#FB7A7D;
padding-top:6px;
padding-bottom:6px;
}
For using mouse into one element we use the :hover CSS attribute. How about for mouse out of the element?
I added a transition effect on the element to change the color. The hover effect works fine, but what CSS attribute should I use for mouse out to apply the effect? I'm looking for a CSS solution, not a JavaScript or JQuery solution.
Here is the best solution, i think.
CSS onomouseout:
div:not( :hover ){ ... }
CSS onmouseover:
div:hover{ ... }
It's better, because if you need to set some styles ONLY onmouseout and trying to do this in this way
div { ... }
you will set your styles and for onmouseover too.
CSS itself does not support a mousein or mouseout selector.
The :hover selector will apply to the element while the mouse is over it, adding the style when the mouse enters and removing the style when the mouse leaves.
The nearest approach is to define the styles which you would place in mouseout within your default (non-hover) styles. When you mouse-over the element the styles within hover will take effect, emulating a mousein, and when you move your mouse off the element the default styles will take effect again, emulating mouseout.
Here is an example, taken from here:
div {
background: #2e9ec7;
color: #fff;
margin: 0 auto;
padding: 100px 0;
-webkit-transition: -webkit-border-radius 0.5s ease-in;
-moz-transition: -moz-border-radius 0.5s ease-in;
-o-transition: border-radius 0.5s ease-in;
-ms-transition: border-radius 0.5s ease-in;
transition: border-radius 0.5s ease-in;
text-align: center;
width: 200px;
}
div:hover {
background: #2fa832;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}
The transitions defined for the div:hover style will take effect when the mouse enters (and hover is applied). The transitions for the div style will take effect when the mouse leaves (and hover is removed). This results in the mousein and mouseout transitions being different.
I think that I've found the solution.
.class :hover {
/*add your animation of mouse enter*/
}
.class {
/*
no need for not(hover) or something else.
Just write your animation here and it will work when mouse out
*/
}
Just try it... :)
You only need the :hover , when you mouse out of the element, it'll return to it's default non-:hover state, like this:
.class { color: black; }
.class:hover { color: red; }
when you hover, the color will be red and when you "mouseout", the color will return to black because it no longer matches the :hover selector. This is the default behavior for all browsers, nothing special you need to do here.
How can i make the transition still occur after the event is removed!
I want to resize div height when hover to be smaller, but I want the size to still smaller even when I remove hover from the div.
#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}
#header:hover{
height:100px;
}
I want the div to have 100px height after the mouse is out, can I make it using only css, or I have to use jQuery to change the class or sth like that?
You can't make a hover "stick" with just CSS. You would need to add a class or inline style with Javascript to maintain the appearance.
You can make a hover "stick" with just CSS.
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 350ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:hover {
animation-fill-mode: forwards;
animation-play-state: running;
}
See http://cdpn.io/GLjpK and http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.