I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.
I have this functionality working completely in CSS, but I'm running into anomaly:
I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.
below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/
.day .sidebar{
width: 200px;
}
.day .sidebar ul {
list-style: none;
padding: 0;
margin:0;
position: absolute;
width: auto;
}
.day .sidebar ul li{
border-bottom: 1px solid #626666;
display: relative;
width: 200px;
}
.day .sidebar ul li:hover{
width: auto;
}
.day .sidebar ul li a{
font-weight: normal;
font-size: .8em;
color: #f2f2f2;
display: block;
width: auto;
padding: 4px 5px;
background: none;
width: 190px;
height: 10px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: background 1.3s ease-out;
-moz-transition: background 1.3s ease-out;
transition: background-color 1.3s ease-out;
}
.day .sidebar ul li a:hover {
background: #797979;
-webkit-transition: background 0.15s;
-moz-transition: background 0.15s;
transition: background 0.15s;
text-decoration: none;
width: auto;
-webkit-transition-property:width;
-webkit-transition-delay:1s;
position: relative;
}
You are overwriting your transitions between background and width, which is probably causing problems.
There is a way to set multiple transitions but I'm fairly sure this way will cause problems.
But
In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.
A solution for toggling between a specific width and auto:
The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:
$(".author").each(function() {
$(this).width( $(this).width() );
});
and then in css
.author:hover { width: 200px; !important }
EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?
Related
I am trying to do the tooltip effect as the following link shows: http://tympanus.net/Development/TooltipStylesInspiration/line.html
I have the following source code on JSfiddle: http://jsfiddle.net/0b5gpLko/
Since I am not completely following the tutorial word by word, I like to know if there is a way to hide the element .inner from showing until it goes above the white bar .text{ border-bottom }.
Thank you
Just add overflow: hidden; to .text, like this
.text {
width: 280px;
display: block;
border-bottom: 10px solid #ffffff;
transition: transform .3s .2s;
transform: scale3d(0,1,1);
text-align: center;
overflow: hidden;
}
Fiddle
The solution is probably really simple but ahhh I just can't get it. I have a div with text in it which I placed right at the same location of an image. What is supposed to happen, and it does, is the image is supposed to fade out allowing the text to be more visible. The only thing is though, that I want the text to be hidden, and made visible only when the user hovers over the image/div text box. I tried a few things like
.display {
visibility: hidden;
}
img.artwork:hover + .display {
visibility: visible;
}
but that doesn't work because it just starts glitching. I can't use z-index either because neither the image nor the div text are in position: absolute or position: relative. Any ideas on how to fix this? This is what I have right now:
img.albumartwork:hover{
opacity: .15;
-webkit-transition: all 0.4s ease 0s;
}
.display {
font-size: 12px;
font-weight: bold;
width: 120px;
height: 120px;
color: rgb(220,221,229);
text-align: center;
margin-top: -120px;
margin-left: 52.5px;
background-color: rgba(0,0,0,0.6);
}
try to target color property on your :hover
SAMPLE
div {
color: transparent;
transition: 0.5s all ease ;
}
div:hover {
color: black;
}
div:hover img {
opacity: 0;
}
img {
width: 150px;
transition: 0.5s all ease ;
position: absolute;
left: 0;
}
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I have divs that grow heightwise on hover and on hover I want them overlap all other divs, and not push them like in my example.
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
height: 80px;
-webkit-transition: all 0.25s ease;
}
http://jsfiddle.net/MrSlacker/5wa3X/
You can make some divs that act like rows for each three divs and set it with position:absolute and z-index.
Check this link http://jsfiddle.net/5wa3X/5/
If they're all going to have fixed dimensions like in your example, position them all absolutely inside a container with position relative; this takes them out of the flow and they won't push any other content.
Well the obvious answer would be for you to use position: absolute for the container, and then position: relative with each one of those divs, so they don't affect each other's positions with the box-model. But that would mean for you to manually position them (each one) so they look like they're stacked...
But maybe there's a way around it using z-index. It would make sense that by sending the container to a lower z-index and allowing overflow, that the children would somehow "hold their ground"... but a quick experiment lead me nowhere. Will try to play with it more later :)
You should use position: absolute with some positioning classes.
http://jsfiddle.net/5wa3X/6/
and I play with Ricardo code..
use
.container div:hover {
height: 80px;
z-index:10000;
background-color:#ff0000
}
your issue get solved..
Credit goes to "RICARDO"
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
/*height: 80px;*/ /*No need to specify width in hover*/
-webkit-transition: all 0.25s ease;
}
I have a problem trying to work out a small test menu with the (for me) "new" css3. The menu should be in the footer which always is on the bottom of the View port. However, I would like to mess around with the transition effects css3 offers therefore I want to grow a point of the menu when you :hover it.
The menu points are set to float:left in a relative menu div. The transition does as intended except the height transition enlarges the element downwards and (obviously as it is the footer) out of the page.
Instead I would like the menu points to grow upward. To solve this i could change the float:left to position:absolute and add bottom:0, but I would have to horizontal position every menu point (hyperlink) manually which I would like to avoid. Since the Menu size (number of menu points) should be variable and I also don't want to use and JavaScript, I am clueless.
Here is the css and the html:
<div id="footer">
<div class="menu">
menp1
menp2
menp3
menp4
menp5
menp6
</div>
</div>
and the css:
#footer {
position: absolute;
background-color: #497044;
bottom: 0px;
width: 100%;
height: 45px;
padding: 5px; }
div.menu {
position: relative;
height: 45px;
width: 480px;
left: 50%;
margin-left: -240px; }
div.menu a {
float:left;
width: 80px;
height: 50px;
border: 3px dashed;
margin-left: 5px;
text-align: center;
-moz-transition: height 2s; }
div.menu a:hover {
background-color: white;
height: 100px; }
thanks for the advice!
http://jsfiddle.net/nqCgu/2/
You mean something like this?
You can use a negative margin-top value and margin-top transition to achieve this. Add:
div.menu { ...
transition: margin-top .2s;
-moz-transition: margin-top .2s;}
div.menu a:hover {
margin-top:-50px;
background-color:white;
height: 100px; }