In CSS: What does this mean:
padding: 12px 0;
transition: all 0.3s ease;
padding : 12px 0;
It's mean in css, padding : top&bottom, left&right;
transition: all 0.3s ease;
"all" transition effect apply on property you set on css.
"0.3s" time when apply transition
"ease" specifies a transition effect with a slow start, then fast, then end slowly
Padding top and bottom 12px
Padding left and right 0px
All the transitions like hover,active should take 0.3 seconds and the timing function used is "ease"
The first Line creates a padding of 12px for top and bottom and a padding of 0px for left and right.
The second line creates a transition effect for all properties (like hover or active) with a transition duration of 0.3s and a transition timing function of "ease". transition is a shorthand for various transition properties in css.
Please refer to the following link for further information.
css-tricks
Related
I am trying to emulate the hover link effect for the menu as seen on this page:
https://www.paifma.com/
The code i am using on my page is:
http://beta.greekconcierge.com/login/
.x-navbar .desktop .x-nav>li {
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
but it doesn't seem to work.
1 - You have to set the initial property value and the final property value to make a transition work
2 - left and right are position properties, in order to achieve that effect I would make and additional div
height 1
width 0
disp. inline-block
center aligned
and on hover you make that div width 100% (using transitions as well)
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
I am trying to place this header in the css but without luck i tried placing it in width container but its just repeating itself.
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
Edit to add css code
.width-container, .flex-caption .slider-container {-moz-transition: all
.2s ease-in-out; -webkit-transition: all .2s ease-in-out;
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;}
If you look at the source in css you will c width container at line 41
I trying to add the header for all pages from here
http://outpostmotorsports.com/OPMSwordpress/inventory/1989-harley-davidson-sportster/
Note 2
Its still showing it three times
Try it like this:
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/wp_header.jpg)
background-repeat: no-repeat;
The background-repeat property sets if/how a background image will be
repeated.
By default, a background-image is repeated both vertically and
horizontally.
Tip: The background image is placed according to the
background-position property. If no background-position is specified,
the image is always placed at the element's top left
Source: (w3schools)
Good luck!
If you are using this code
.width-container,
.flex-caption .slider-container {
-moz-transition: all
.2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
}
then you are adding the background image to more than one element.
I'd suggest you try adding a new rule:
.width-container{
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
}
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;
}
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.