I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:
.nav2Active{
font-size:16px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
width:100px;
border-left:thin solid transparent;
background:transparent;
}
.nav2Active::before{
content:'';
background:red;
position:absolute;
height:30px;
width:0%;
-webkit-transition:width .3s ease-out;
-moz-transition:width .3s ease-out;
-ms-transition:width .3s ease-out;
z-index:0;
}
.nav2Active a{
color:#000;
text-decoration:none;
padding-left:10px;
}
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
}
.nav2Active:active{
background: #CCC;
border-left: #F60;
}
http://jsfiddle.net/pwfv33hs/
Hay its very easy do this :
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
z-index:-1
}
It's a z-index issue, you set a value for the pseudo element = 0.
.nav2Active::before{
z-index:0;
}
But all elements has the same value as default. In order to work you can set a -1 value. But I don't like to work with that negative values. I suggest this:
.nav2Active a{
position:relative;
z-index:1;
}
Check the UpdatedFiddle
Related
I'm working on a simple progressbar with LESS (I started a while ago).
[Codepen] http://codepen.io/mustafoski/pen/ybbVvJ
I'm not really sure what the issue is, however if you hover over the empty bar or the h2, you'll see that the bar is filling up. The issue you can see, is the bar is on top of the placeholder.
It should look like this: http://codepen.io/mustafoski/pen/VbpBEe
(I don't get it, why can I post this url without problems)
I don't know what I'm doing wrong.
Thank you.
BR
Alim
After trying for a while, I figured it out. The code was alright only one class was missing at the hover part.
If you gonna look at my pen you will see this:
Old:
.bar(#widthInPercent)
{
position:relative;
content:"";
width:0px;
height:35px;
background-color: #green;
margin-top:0px;
margin-left:0px;
margin:0px !important;
transition: all 1s ease-in-out;
&:hover
{
width:#widthInPercent;
}
}
New:
.bar(#widthInPercent)
{
position:relative;
content:"";
width:0px;
height:35px;
background-color: #green;
margin-top:0px;
margin-left:0px;
margin:0px !important;
transition: all 1s ease-in-out;
&:hover .bar /*This Class was missing*/
{
width:#widthInPercent;
}
}
Thx for every one :)
I have a button in HTML and I have to add opacity to it. I want to use CSS to do that. Here is my existing CSS code for button:
.btn_nav{
position:fixed;
width:100%;
height:68px;
background-color:#323232;
border-bottom:2px solid #777777;
}
There are few different ways to apply opacity to a button. Here is one of them.
.btn_nav{
position:fixed;
width:100%;
height:68px;
background-color:#323232;
border-bottom:2px solid #777777;
/*Below are two new line which enable opacity*/
opacity: 0.9;
filter: alpha(opacity=90);
}
add this css property
opacity:0.2; // change values as you like
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}
Update: The original phrasing of this question was vague so i've modified it to better express what i'm asking.
Lets say I have two divs
<div class='button'>A</div>
<div class='button green-button'>A</div>
with the following styles:
div.button {
/* define position, size, etc ...*/
color:#FBB
background-color:#F00
}
div.button.green-button{
color:#BFB
background-color:#0F0
}
In this example it was easy to shift the hue of the first button from red to green by simply changing shifting the values of color and background-color by 1 digit. If I wanted to make a blue button I could do the same shift again for a 3rd button.
However, in the case where I don't want to shift completely from one color to the next its a bit trickier.
Additionally I want to color shift everything in the div, not just the background-color and color properties. So if I were to place and image in the div the colors of the image would get shifted as well.
Is this possible in CSS? If not can you do it in Javascript?
Since everyone is posting wild guesses, I'll jump right into it.
You could achieve something using CSS filters (in your case hue-rotate)
Or the same using a CSS preprocessor like LESS.
Do you mean like this:
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
background-color:red;
}
Or are you looking for something that figures out the color offset on it's own?
If you are there is CSS3's filter: hue-rotate(angle);
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
-webkit-filter:hue-rotate(250deg);
-moz-filter:hue-rotate(250deg);
-ms-filter:hue-rotate(250deg);
filter:hue-rotate(250deg);
}
Yeah, you'll need multiple elements though.
HTML:
<div>
<span class="over-bg"></span>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }
http://jsfiddle.net/TeCvr/1/
Another approach using pseudo-elements:
HTML:
<div>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
top:0; height:100%; width:100%; background-color:#22FF00; }
http://jsfiddle.net/TeCvr/2/
Well you could use CSS3 supported transition style rules like:
.button:hover {
background-color: #F0F0F0;
-webkit-transition: background-color 1ms linear;
-moz-transition: background-color 1ms linear;
-o-transition: background-color 1ms linear;
-ms-transition: background-color 1ms linear;
transition: background-color 1ms linear;
}
Is there any specific reason as to why you would like to achieve this..? I can't think of any application as such; unless you came across this while reverse engineering a design and couldn't find the CSS that caused this behaviour..?
Reference:
http://www.css3.info/preview/css3-transitions/
I don't know if i understand you. You can change the class of the div. For example .button to .buttongreen with diferent properties.
Without using color and background-color properties, you can still use:
background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)
That's a gradient from a given color to the same color but the whole gradient is not a color in CSS.
Background
I'm customising a tumblr theme (Source: hasaportfolio), and I am trying to change the size of one particular element.
This element, on :hover, is meant to transition opacity - "fade in". What is happening, however, is that once I change the pixel sizes the transitions refuse to work, and the newly appearing content does not appear at all.
HTML Code
The HTML code this is being applied to is as follows. I've commented it as well as I can.
<div class="post video featured"> <!-- wrapper, no css attached -->
<div class="box-featured">
<iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>
<div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->
<h1>Paint</h1>
<p>I hate yogurt. It's just stuff with bits in.</p>
<p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>
</div><!-- box-caption-text-featured -->
# <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->
</div><!-- box-featured -->
</div><!-- post -->
I also have another copy of this code, the only difference is that it is without the -featured at the end of each class definition. This is so I can see if the code works at its 'original' size (which it does).
CSS Code
The original code for running these boxes follows:
.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
My changed code is as follows. The only things I have changed are the width and height pixel values.
.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
Have I just missed something dumb, or is there an issue in this code that prevents what I'm trying to do?
Example Page
There's an example of what I'm taking about over here.
What i'm thinking at this point is that you need to change it to:
.box-featured:hover