I have this site: http://bit.ly/1p1Dr9W
This navigation looks kind of blank. I'd love to add css animation to it. I tried using opacity, but it does not work as intended. What am I doing wrong?
I added hover animation over each navigation elements and it works fine, but I'd like to add animation to whole navigation menu, so the whole list of sub menu elements would open with some animation (for example slow opacity to 1).
This is what i got:
#menu-menyy li ul {
background-color: transparent; }
#menu-menyy li ul:hover {
background-color: #00a3fc !important;
-o-transition:.8s;
-ms-transition:.8s;
-moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;}
But whole navigation menu still just pops open, and as i move my mouse over the actual menu, i see the transition in the background. Can this be done in CSS afterall or it is made with jquery?
Change css to
#menu-menyy li ul {
opacity: 0; }
#menu-menyy li:hover ul {
background-color: #00a3fc !important;
opacity: 1.0;
-o-transition: opacity .8s;
-ms-transition: opacity .8s;
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
Related
Here is the page in question:
https://www.alchemycreative.studio/test-layout-3/
The little hamburger icon points to "#openModal" but it does not work unless you open it in a new tab. It will disappear fine, however, when you click the X, which points to "#".
They both use the same technique. Can anyone tell me why it's not working for the hamburger? The modal is also doing a weird thing where it comes and goes briefly after page load.
The instructions I followed are here, complete with a demo:
https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Below is my CSS, which takes out all the extra styling:
.modalDialog {
position: fixed;
z-index: 999;
opacity:0;
-webkit-transition: opacity 800ms ease-in-out;
-moz-transition: opacity 800ms ease-in-out;
transition: opacity 800ms ease-in-out;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
I've created a menu that adjusts itself as it gets past a certain point of the screen. Everything works great, except for transitions and only on Chrome.
I tried adding a -webkit- version of the transition, but it doesn't work either.
This is my CSS
.past-main {
height: 97px !important;
margin-left: -40px;
width: 100%;
top: 0px !important;
position: absolute;
-webkit-transition: height 300ms opacity 300ms top 300ms ease 0s;
transition: height 300ms, opacity 300ms,top 300ms ease 0s;
opacity: 1!important;
height: 90px !important;
margin-top:0px !important;
}
.past-maina {
-webkit-transition: top 800ms ease 0s;
transition: top 800ms ease 0s!important;
top:0px!important;
}
.past-mainb {
-webkit-transition: all 800ms ease 0s;
transition: all 800ms ease 0s;
margin-top:0px!important;
}
To add more context, the various levels of your header menu gets those classes applied when the user scrolls past a certain point:
some wrapper elements get past-maina and past-main
each menu item (they are li elements) gets past-mainb
Before scrolling down, each menu item has varying margin-top values; afterwards they all get 0. These are set with style rules like
.desktop-nav ul li:nth-child(1) {
margin-top: -10px;
}
Now, this selector has a higher specificity (22) than your .past-mainb selector (10), which, I'm guessing, is why you added the !important annotation to the latter's rule: otherwise, it wouldn't take effect.
But this had an undesired side effect: important declarations always win over transitions! Thus, if you want your transitions to take effect you can't use !important.
The simple cheat is to up the specificity of the "past main" style rules. For example, add an ID selector. Or perhaps better: instead of adding a class when the user scrolls, remove a "before main" class instead, and rewrite all the rules giving specific menu-item margins to use it:
.desktop-nav.before-main ul li:nth-child(1) {
margin-top: -10px;
}
I have a printer-friendly/PDF image that looks like this:
Okay, simple enough. When hovering over it, however, the background turns gray, as I have my default hyperlinks set to this, for example:
#footer a:hover {
color: white;
background-color: #636363;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
text-decoration: none;
outline: none;
}
So the question becomes, what css rule can I use on this WordPress domain to stop that background-color from happening? I'd like NO background color when hovering over images. Here's what I've tried:
.printfriendly a:hover img {
background-color: transparent !important;
opacity: 1.0 !important;
}
Among other things, but that just doesn't work. Here is what I see in Firebug:
And when I right-click and "copy html" to that selection, this is the html output:
<div class="printfriendly pf-alignright"><a onclick="window.print();if(typeof(_gaq) !=
'undefined') { _gaq.push(['_trackEvent','PRINTFRIENDLY', 'print', 'NULL']);} return false;"
rel="nofollow" href="http://www.printfriendly.com/print?url=http://www.occupyhln.org/occupy-
hln-hall-of-heroes/"><img alt="Print Friendly" src="http://cdn.printfriendly.com/pf-button-
both.gif" style="border:none;-webkit-box-shadow:none; box-shadow:none;"></a></div>
So I'm pretty much at a loss -- which is happening less and less with CSS, as I'm learning more, experimenting and reading, but any help anybody can offer me as to how to get rid of that background-color when hovering over the print/pdf image would be greatly appreciated! IF need be, there is an example here: http://www.occupyhln.org/occupy-hln-hall-of-heroes/
The background colour is not on the image, but the link itself.
.entry-content a:hover { background: none; }
I have the following class for nav hover which simply adds a background image on hover..
nav a:hover, nav a:focus, nav a:active {
background:url(../images/goldNavBG.png) repeat-x;
}
I would like to add a simple css3 fade in effect - but am worried about a fallback for old browsers as it needs to support ie7 +, is it possible to cater for both - so its simply shows a bg for older versions and doesn't break anything!?
Cheers
Try this:
nav a{
/* your other styles */
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
nav a:hover, nav a:focus, nav a:active {
background:url(../images/goldNavBG.png) repeat-x;
}
On non-CSS3 compatible browsers the background will just be replaced with no transition.
Here's a demonstration: http://jsfiddle.net/Vq34s/1/
I am a beginner in this and I am working on my new website. But I am stuck at one point where I want the effect that will make my links fade into images. I am having a navigation-bar on top of my page and when I hover over the link, I want the text to fade out at the same time as a small logo is fading in. And when I hover out of the link I want the image to fade out at the same time as the lin is fading back in, you know?
But when I do this, the image just pops up and fades out at the same time as the link is fading out...
#navigation a[name="project"] {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#navigation a[name="project"]:hover {
opacity:0;
background-image:url(bilder/project.png)
}
The image is the background for the element you're fading out, so it will also fade on hover. You'll need to separate the image into a separate element.
Perhaps you could use absolute positioning inside a container to have the text cover up the image, and then when the text is hovered over, it'll fade out, revealing the image underneath.
A working example of this is at http://jsfiddle.net/y9aw7/
HTML:
<div id="container">
Example Text
<img src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
position: relative;
}
a, img {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
a {
z-index: 1;
line-height: 100px;
text-align: center;
background-color: #fff;
-webkit-transition: 0.4s opacity;
-moz-transition: 0.4s opacity;
-o-transition: 0.4s opacity;
-ms-transition: 0.4s opacity;
transition: 0.4s opacity;
}
a:hover {
opacity: 0;
}
Edit: Further jsfiddle, forked from the fiddle provided by the OP, with corrected CSS: http://jsfiddle.net/JmwdC/1
Try this :
Demo
CSS
#gl{
position:absolute;
left:0px;
width:100px;
height:30px;
opacity:0;
transition:all 0.5s;
}
#gl:hover{
opacity:1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<a href='http://www.google.com/'> <img id=gl src='https://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'>
Google</a>
</body>
</html>
You can use any property you want to achieve this, except display which does not work with CSS3 transition.
The most common techniques make use of
opacity (to 0)
height (to 0)
z-index (to negative / lower value than the container)
Sticking to your example, you can do it by using an background-image in <li>, and changing the opacity to the <a>, no changes to your HTML are needed.
Demo: http://jsfiddle.net/D6wuH/2/
Relevant CSS
li {
/* ... other stuff... */
background:none no-repeat scroll center center ;
}
#navigation li, #navigation li > a{
transition: all 1s ease-in-out;
}
#navigation li > a{
background: white;
}
#navigation li:hover {
background:url(http://dareminnesota.com/images/facebook-like-button.png)
no-repeat scroll center center transparent;
}
#navigation li:hover > a {
opacity: 0;
}
Playing with the difference between the initial state and the hover state of a lot of properties (was X, on hover becomes Y; wasn't there, on hover it's there; was there, on hover it's not there anymore) will let you achieve a world of different results, with weird effects like this: http://jsfiddle.net/D6wuH/0/ :)