I need some help with a 3d tranform. The transform is on the a:hover event and uses a:hover and a:before pseudo element to be transformed into a vertical flip, it's like a crad filp but it starts the flip at the base line of the menu, it should look like a cube flipping upwards. Here is the code on code codepen Please try and get this to work in Webkit and Mozilla and of course IE, please see what you can do.
the example i have is limited but it does work in FireFox and no other browsers so this would be better tested in IE and chrome first.example
PS. The pink a:before elements need to be transformed on a flat perpective surface at the bottom of the A tag and the a:before tag should animate upwards in place of the hovered anchor tag (-90deg I think), when it animate the pink tag shown in place of the first tag
You should post code rather than links. However, from your codepen I can tell you're not using vendor prefixes to support multiple browsers.
When you use transition, transform, etc you should write
-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
See this SO question: Does Internet Explorer support CSS transitions?
Related
I'm applying transform:scale to the :hover event for an <img> element nested within a <button> control.
It works in Chrome, but not in Firefox or IE.
Here's the code (below). Is there a way to make it work in Firefox and IE?
I'd like to keep the effect on the hover event for the nested <img> file, but I can put it on the <button> if needed. I'm really just curious if this code can be made to work on FF & IE or if it's a known limitation with those browsers (or non-standard awesomeness allowed by Chrome).
.zoomable {
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
border: 1px transparent solid;
}
.zoomable:hover {
border: 1px orange solid;
transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
}
<button>
<img src="bogus.png" class="zoomable" />
</button>
You should set :hover on a button and keep everything like it is. Just as you said. If you use element that doesn't include interaction like div or span you can leave .zoomable:hover and it will work. It is a button issue since it brings it's native interaction and probably collides with child element hover event.
So I've saw this website: http://unfold.no/
And I want to learn how to build navigation bar that is both transparent and can change color as function of background (if you scroll up or down you'll see it) .
I have limited experience with navigation bars that dates to old Dreamweaver versions, so forgive me for the generality of the question... Any advise of where to start will be appreciated.
I guess your issue can be solved by reading the answer on this question:
Changing classes with animation depending on scroll position
Basically, in the example you are showing, the menu has a position: absolute on the page, which positions it on the top right corner of the page. Then, an easy way of changing the color of the menu is by swapping classes on the menu itself through Javascript. You can use the code shown on the link above to see how this is done.
By swapping classes regarding the element colors with animation, you then give each element a CSS transition just like this:
.object{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
This CSS will make your elements change color by fading with an animation duration of 0.5 seconds.
It is pretty simple if you know have a basic understanding of CSS and Javascript
I'm experiencing a very annoying bug which appears in Safari 5.1 on Mac. Since this browser is still very common I need to support it.
JSFiddle: http://jsfiddle.net/QCvZt/2/
On clicking a button, a class is added to a containing element #chance. The stylesheet has rules that then cause the clicked element #chance-loose-card to animate away with transitions immediately and then, after a delay, #chance-card animates in.
They fade out and in with opacity, and I flip visibility to hidden when they're totally transparent, since in the full site they might otherwise be over top of things and capturing clicks meant for elements below.
This works very well in Firefox and Chrome (and Safari 6).
But in Safari 5.1 on Mac the first animation is happening as expected but then #chance-card isn't appearing. It's not until I hover over the #carousel element (presumably it's because it triggers another transition -- a button fading in) that #chance-card makes its appearance.
Now, given my assumption that it's to do with another transition being triggered, I tried forcing a transition to happen every second via a Javascript setInterval flipping a class on an element, causing it to transit back and forth. But this did not unfreeze the transition and make #chance-card appear. Transitioning a transform: translate instead of margin-left on the #chance-card doesn't help either.
As noted in the JSFiddle, reducing the transition-delay on #chance-card does make the bug go away, but for my use case this isn't an acceptable solution.
I wonder if anyone can suggest any workarounds? I haven't found anything which sounds similar in my searches.
I found a solution!
http://jsfiddle.net/QCvZt/4/
Changing the transition-delay of the visibility property to just less than the delays of the other properties fixes the issue. So it seems that if transitions are delayed, if visibility is hidden at the time when the transitions start (even if it's going to flip to visible at that same moment), the transitions don't start until somehow triggered (like in this case with the mouse over the grey area, though I don't know exactly the mechanism). Flipping visibility to visible just before the other transitions are due to start makes the problem disappear.
In this case I changed this (vendor prefixes omitted)
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.5s;
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
to this
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
Hover over each ribbon and the svg will change colour. All seems good :)
http://codepen.io/anon/pen/qEILH
But, only the first ribbon gives the right result, the others seem to have a delay before the colour transition occurs and the ONLY difference between them are the values of href.
Why is this???
This seems only to be a problem on Chrome.
Are you talking about the transition from grey to white? Which version of IE are you using?
Try changing the .ico svg selector to: (delete the additional transition-duration, or set it to 0s)
.ico svg {
position: relative;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0s;
fill:inherit;
}
I think it might have something to do with your other browsers not understanding transition-duration. But Chrome does, so it adds an additional 0.3s resulting in the delay.
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/