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)
Related
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
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;
}
If I have a series of divs all with float: left and I resize the browser so they wrap, can I animate their transition to their new location using only CSS animations (no JavaScript)?
Without using JavaScript that's most likely a no...
CSS transitions and animations rely on the elements' CSS properties changing. The line wrap behavior you're seeing when the window is resized doesn't change the elements' properties, so you won't have anywhere to add a transition.
Even with JavaScript I doubt creating the effect you're after would be trivial, you may want to check out a plugin like Masonry
You can try use transistions, but I think that in your example it's not possible without JS.
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
Okay so what I'm trying to do should be pretty simple (I hope).
I am using a wordpress plugin for my menu and an extension to make it sticky. My menu isn't at the top already, it is below another container, so it becomes sticky when the menu container reaches the top of the browser screen (as it should).
I have a menu item that is hidden when the menu is "not sticky" and then it becomes visible when it is "sticky." Everything works perfectly, however now I want to add a fade in effect preferably only using CSS3 (for simplicity of integration). So the fade in effect should take place when the visibility become visible (see code below, but basically when the menu becomes sticky)
My custom class for the menu item is ".jrm-um-sticky-only"
Here is my code to achieve the appearing/disappearing menu item:
#megaMenu ul.megaMenu li.jrm-um-sticky-only{
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
}
#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky li.jrm-um-sticky-only{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
I tried adding:
-webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
-moz-transition: visibility 0.2s linear, opacity 0.2s linear;
-o-transition: visibility 0.2s linear, opacity 0.2s linear;
to the last selector above (where the opacity is 1), but it didn't work. I also tried setting opacity to 0 along with the above transition code but no avail.
I'm a newbie so sorry if there are errors in my approach here. (not sure if I need the opacity at 0 if the visibility is hidden???)
Thanks!!!!
Maybe you should add your transition rules to the first block
(#megaMenu ul.megaMenu li.jrm-um-sticky-only)
I'm trying to create a horizontal menu that will display a list of icons with centered text underneath.
This is what i have achieved so far:
http://lifeofstrange.com/fade/
I would like the icons to use one image sprite that will fade in/out when you hover, if possible the text underneath will also have the fade effect.
I'm very close to achieving the effect however i'm not sure where the css3 transitions would be in the code,
Your help or assistance is much appreciated.
If you want a fade transition on the arrow and text, then you won't want to be changing the color of the text and the position of the arrow background. What you will want to do is set the background to be the darker arrow, and then when you hover set the opacity of it to say 0.6 or something, and same with the text. If you transitioned the background position you would see a slide effect from one part of the sprite to the other, and this isn't what you want.
ul li a {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
ul li a:hover {
opacity: 0.6;
}