Transition triggers on refresh and looks awful.
.text-input {
height: 50px;
width: 100%;
outline: 0 none;
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 25px;
border: 0;
transition: background-color 0.2s ease-in-out;
}
.text-input:hover {
background-color: #f6f6f6;
transition: background-color 0.2s ease-in-out;
}
Expected Result: Smooth Hovereffect when hovering down from the object "text input"
Result: Smooth Hovereffect when hovering down from the object "text input, but when I refresh the page it runs the same transition and looks not very well (so if I'd do "transition: all 0.5 ease" it would even let the textbox pop up to it's size for example) In my case only the background-color transition is runned when refreshing the page
Related
I'm trying to create a mobile vertical dropdown menu but I'm having an issue with showing the items of the sub-menu by using :focus for both .
I found a workaround by using :focus for sub-menu and :focus-within for its items .
This solution is working and showing the sub-menu items for Google Chrome only while other browsers like Samsung internet and UC browser are not showing any except the :focus of sub-menu.
I found another solution by using :hover for both and it's working for almost all browsers.
I have two questions:
Why it was working only with chrome only?
How do I use :focus for both the sub-menu and its items?
CSS used :
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}
Its hard to know what answer would work best for this situation without seeing how you implemented your HTML. :focus-within is not supported well: https://caniuse.com/#search=focus-within. Without seeing anything else I'm thinking maybe you would use JS to add and remove :hover/:focus like this answer: Can I disable a CSS :hover effect via JavaScript?. That way when you are not displaying sub-items you can get not use their hover effects.
Website: http://uniformserver.com
The bottom footer is not formatting accordingly. It should be at the end but when the site loads, it comes up the the image size.
http://imgur.com/XoqVqdg
Should look like this:
http://imgur.com/zQNlIWn
If you navigate to another page, it corrects itself.
Footer CSS
footer {
clear: both;
padding-top: 40px;
text-align: center;
cursor: default;
padding-bottom: 0px;
margin:0px auto;
}
footer p {
color: #c1c1c1;
font-size: 11px;
padding: 4px 8px 4px 8px;
background: #f7f7f7;
background: rgba(0,0,0,0.04);
display: inline;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition:color 0.2s ease-in, background 0.2s ease-in;
-moz-transition:color 0.2s ease-in, background 0.2s ease-in;
-o-transition:color 0.2s ease-in, background 0.2s ease-in;
transition:color 0.2s ease-in, background 0.2s ease-in;
}
footer p:hover {
background: #f1f1f1;
background: rgba(0,0,0,0.05);
color: #999;
}
Your footer has some padding at the bottom. If you reduce it, it will get closer to the bottom of the page.
footer.container { padding-bottom: 0; } would be a footer that touches the bottom completely, and footer.container { padding-bottom: 15px; } is probably close to what you're looking for.
However, because your page doesn't have a lot of content on it, your footer will appear higher when there just isn't enough content on the page to fill the full viewport.
A quick trick to experiment with this is zooming in and out on your browser. You can use the ctrl or cmd + +/- shortcuts.
I am trying to recreate an effect I saw on "TheButton" subreddit. You can see that next to most usernames there is a colored dot that when hovered over expands and reveals some underlying text.
Using their CSS as a starting point, I can recreate this effect but my issue is that the underlying text I have does not collapse, so I never achieve a "dot" shape while the user is not hovering.
Here's my CSS:
* {
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.flair {
min-width: 12px;
max-width: 12px;
height: 12px;
line-height: 12px;
border-radius: 12px;
border: none;
overflow: hidden;
padding: 0;
vertical-align: middle;
font-size: 10px !important;
-webkit-transition:all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
position: relative;
}
.flair:hover {
max-width: 500px;
padding: 0 5px;
color: #fff;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.flair-no-press {
background:#888;
color:#888;
}
And here's my HTML:
<span class="flair flair-no-press" title="non presser">non presser</span>
Here's a jsfiddle showing what this looks like. Once again my intended effect is simply making the dot collapse entirely when not being hovered over like they have.
What am I missing here?
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
I styled a link so that when you hover it, there will appear a border on the top; and when you hover off the border will disappear with a transition. The border slides in instead of fading in when you hover over it and off. I want the border to fade in instead of slide. How can I do this? Here is a JsFiddle
HTML
<div>Text</div>
CSS
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border .2s ease-in-out;
-webkit-transition: border .2s ease-in-out;
-moz-transition: border .2s ease-in-out;
}
div:hover {
border-top: 3px solid #000;
}
html, body {
margin: 0;
padding: 0;
}
If you want to animate the color, animate the color, not the entire border. You're now also animating it from 0 pixels to 3 pixels, so of course it slides in. You should just give it a default transparent border instead.
div {
line-height: 50px;
width: 100px;
text-align: center;
cursor: pointer;
transition: border-color .5s ease-in-out;
border-top: 3px solid transparent;
}
div:hover {
border-top-color: #000;
}
Sample on JSfiddle
As a sidenote: -moz-transition is obsolete nowadays, since FF17 or so Mozilla supports the CSS Transitions module without prefix.
Update dec 2014: as I noticed this answer is still being viewed and upvoted frequently, please note that transition is no longer prefixed in any current or recently superseded browsers.
In this case - you are going to need to have a border to begin with as well. Make it transparent in the first state. This way it will not "grow" into place... and the color will just fade as it changes.
http://jsfiddle.net/kLnQL/11/
div {
border: 3px solid transparent;
}
div:hover {
border: 3px solid #f06;
}