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 :)
Related
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
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.
Good Evening StackOverflowers!
I am running into what seems to be a catch 22 with my code.
I am using the new CSS3 Ribbon Navigation with an image logo.
Here is my problem:
The Ribbon Navigation has overflow:hidden; in the css to hide the bottom parts of the ribbon. However, to get my logo in the middle of the navigation, I need to include it in the DIV. With overflow:hidden; on, it crops my logo (because it's overflow), and my navigation looks like this:
http://i.stack.imgur.com/JoXyJ.png
Not wanting to cut off my logo, I remove the overflow:hidden; but then I run into the problem of the ribbon tags showing under the nav, like so:
http://i.stack.imgur.com/bZE26.png
It seems there is no simple solution to this. As a new developer, I find I am starting to pull my hair out a little. Is there a workaround that will make the ribbon tails disappear, and allow my logo to show?
This is my HTML code:
<body>
<div class="ribbon">
<a href='#'><span>Home</span></a>
<a href='#'><span>Portfolio</span></a>
<img id="logo" src="img/logo-grungewh.png" alt="logo"/>
<a href='#'><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>
and my CSS code:
/*************************
* Left Ribbon Navigation *
**************************/
.ribbon {
margin-top:6em;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#D55E96;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
}
/*********************
* Logo In Navigation *
**********************/
#logo {
margin-top:-5em;
z-index:3;
border:0;
}
Honestly, any advice or guidance would be truly appreciated. I have read many threads that have been posted on this, and they don't seem to be on the same wave. Thank you Overflowers for putting up with newbie's like me, and not ripping your hair out.
Best,
Laura
What I would do is set the anchors in the ribbon to overflow hidden except the one that holds the logo
.ribbon a:not(#logo-anchor){
overflow:hidden;
}
Fiddle
If you target browser doesn't support :not then give all the anchors except the one with the logo a class.
.ribbon a.overflow-hidden{
overflow:hidden;
}
Fiddle
I have frame styles for the image:
.frame {
background:#efefef;
border:1px solid #f6f6f6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* #todo Old Browsers Fix */
margin-bottom:15px;
padding:4px;
}
in one place of the project I work on, I have following HTML code:
<a href="#" class="preview">
<img class="frame" src="http://placehold.it/288x159" alt="" />
</a>
Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:
.preview img.frame {
margin:0;
position:relative;
}
.preview:hover {
background:url('../img/icon_zoom.png') center center no-repeat;
display:inline-block;
z-index:40;
}
.preview img { /* #todo Add different browsers rules */
opacity: 1;
/*moz-transition-property:opacity;
-moz-transition-timing-function:ease-out;
-moz-transition-duration:500ms;*/
-moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
opacity:.5;
-moz-transition:opacity 1s ease-in-out;
/*-moz-transition-property:opacity;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;*/
display:block;
position:relative;
z-index:-1;
}
However I faced few issues:
- how can I show background only for image body (currently it's also being displayed on the border)?
- why opacity is not being changed in Chrome?
jsFiddle added. As you may see, it works in FF, but not in Chrome.
The problem appears to be that you're changing the display to inline-block. Take it out, it should have the same functionality and work just fine.
Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/