Is there any way I can use CSS3 to fade in and out a solid white background of a <div>?
the content should remain visible so just the background should fade.
Any ideas using css3 transitions/transforms?
thank you for your help.
Sure, you can use the transition property directly on the background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Here's an example of a red background fading out on :hover.
You may find this useful for examples of image and background color fades: -
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
However using CSS 3 to do the transition will limit the effect to browsers that don't support it.
You could have two divs in one container div. The first div contains the white background, the second one gets the content.
Then, use a CSS3 transform to animate the opacity of the first div to zero.
Related
I'm trying to apply following properties to the Box.
But not able to understand how to apply them in the form of transition and animation.
You need in CSS:
transition-timing-function: ease-out;
animation-duration: 0.3s;
See more about transitions here
The code below is for making an element do something on hover (in this case make the background color red):
.myClass:hover {
background-color: red;
}
Also take a look at this stack overflow page where they discuss how to manipulate animations.
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
Im using a green image as a repeating background tile on my site. When you click an element the background changes to a blue repeating image.
I want to animate the colour change. Can this be done with CSS3? Could one solution be to use a black and white image for the tillable pattern and colourise it with CSS3?
Instead of having a tile background-image with a solid colour, give it a transparent background. This will then allow you to transition the background-color using CSS3 to achieve the same effect:
DEMO: http://jsfiddle.net/yLLNa/
CSS
html {
background-color: red;
transition: background-color 1s linear;
}
html:hover {
background-color: blue;
}
I have a problem with the CSS transition property.
I need to declare two transitions for a section-tag. Every transition with the section should have a duration of 1s, only the background should have a duration of 0.3s
So my CSS-transition code would look like that:
section{
background: black;
transition: all 1s ease, background 0.3s ease;
}
section:hover{
background: green;
transform: translateY(100px);
}
But when I hovering the link now, the background get animated in 1s and it blinks strangely.
Here the codepen Demo
Someone know why this happend? And how can I realize my goal?
And yes, I need the all property!
EDIT
Just found a strange one. In the linked codepen above, it blinks. But when I animate also the padding, it stop blinking! But the background will be animated in 1s...
Here's the second demo
I have tried this in code pen, the problem not in the transition property.
Better you use div tag for the link background and create separate transition for that.
Surely div tag will give the best solution for your problem.
The problem occurred because as you hover over the element, it starts moving downwards.
When the element is not hovered, it would revert back.
Now as you hover, the elements starts moving and then loses the hover immediately which causes it to return to original state but again gains the hover effect as it again receives the mouse-over event which also cause blink, and the strange phenomenon you observed.
If you place mouse close towards the bottom, you observe the desired effect.
The fix should be that you write a hover for the container that contains these elements and apply the effect to these elements.
Besides you've applied transition in only 1 state which also may be the reason for blink;
try using transitions to both the statements like below:
section{
width:300px;
height:300px;
background:black;
color:white;
transition: background 0.3s ease, all 3s ease;
}
section:hover{
background:green;
transition: background 0.3s ease, all 3s ease;
}
I have an imput field in form with multiple(two) backgrounds like this:
background: url(framework/images/search.png) no-repeat 6px 7px,
/*this is a magnifying glass icon - this is important later */
rgba(200,200,200,0.1);
Then I've got a transition:
transition:background 0.2s linear, box-shadow 0.5s linear;
And on focus of the input field:
input:focus, {
background:rgba(0,0,0,0.1);
box-shadow:0px 1px 0px rgba(0,0,0,0.1) inset;
}
Basically what it does (or should) is when the input field is active the background changes to slightly darker color with transitions. Also box shadow makes an inner effect of inside border. That was the case when background was of one element (only background color). Now when I added icon on higher layer the background wont change, but box-shadow works. I think that browser is confused how to change color of bitmap image.
My question is: Is there a way to transition only one layer of background (address it somehow), so that the bitmap image will stay the same and the color will change?
Thank you.
EDIT: Jsfiddle -> http://jsfiddle.net/8DRTt/
http://jsfiddle.net/8DRTt/1/
input:focus, #two:focus {...}
the problem was the selector.
The #two selector is stronger than the input:focus selector, thus overiding the background property.
When you add #two:focus to the selector of the darker background, it can no longer be overridden.