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
Related
I've been racking my head over this seemingly little thing for a while but I'm at my wits end. I'm running a free Customizr theme on my site.
What I am trying to achieve is to have the hover effect in the navigation bar like this demo here. As you can see, only the text of the dropdown menu items are nicely underlined.
I've found and tried to use this CSS code here:
.sliding-middle a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
width: 100%;
background: #08c;
}
However, the result I got as you can see here, the dropdown menu items are underlined all the way across. I found that if I didn't target the "a" tags, the line would appear even more weirdly on the main menu items. But by doing so, the whole submenus inherit this effect.
If anyone has any idea what I'm missing, please help me out. Thank you in advance!
The example you want to achieve uses two span-nodes inside the a and only targets the first one (adding a pseudo :before) with this CSS
.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
background-color: #313131;
visibility: visible;
-webkit-transform: translate3d(0,0,0) scaleX(1);
-moz-transform: translate3d(0,0,0) scaleX(1);
transform: translate3d(0,0,0) scaleX(1);
}
If you add a span for the link text, you should get pretty much the same result.
Alright! After a few days of stressing it out and breaking my site, I've finally sort-of solved this issue.
Firstly, as #janh2 mentioned, you need to get the page to add span tags to the navigation menu labels. I've asked a different question and have updated it with the answer.
Next it's simply using the following to get the result:
.sliding-middle span {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle span:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
width: 100%;
background: black; /*colour you want your line to be*/
I hope this helps guys.
I have a div called main content, inside this div is another div called slideup. Using CSS animation, when you hover over the main content div, the slide up div slides up from the bottom to 50% height. This can be seen in my css code below
.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup {
min-height: 50%;
}
The hover works perfectly well, however I included the click function (.active) for touchscreen devices. I can not seem to get the click function working. Could somebody please tell me what I have done wrong?
Thanks
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 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?