Okay, so I can't figure out why this isn't working.
The hover effect with the fade in doesn't seem to be applying to this.
css
.panel_button {
}
.panel_button a {
webkit-transition: all 10.0s ease;
-moz-transition: all 10.0s ease;
transition: all 10.0s ease;
background-color: #000;
display: block;
width: 50%;
height: 160px;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}
Header page
<div class="panel_button" style="display: visible;"> BLOG </div>
The website where this code is implemented is at niu-niu.org
Thank you!
Your webkit-transition: all 10.0s ease; is missing the dash at the beginning. Change it to this:
-webkit-transition: all 10.0s ease;
Related
I have a transition on my anchors and every time I refresh the page, it just resets to default state of the anchor, and then it goes to the state I pre-defined with CSS.
When I put the transition into :hover it doesn't do this, but then I won't get a transition when I stop hovering over it.
.button1 {
display: inline-block;
padding: 0.5em 3em;
border: 0.16em solid #DDDDDD;
border-radius: 50px;
margin: 0 0.3em;
box-sizing: border-box;
text-transform: uppercase;
font-weight: 400;
color: #DDDDDD;
text-align: center;
font-size: 40px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button1:hover {
color: #FFB5B5;
border-color: #FFB5B5;
border-radius: 20px;
}
.buttons {
text-align: center;
}
<div class="buttons">
div
flex-box
</div>
I'm experiencing a firefox specific bug with a simple menu I've built
It's a ul-list that has an on-hover effect for the list items, the list items have transform:translateX(12px) applied on hover, and the text links have a negative indent applied at all times, the combination of the two create a Firefox specific bug where part of the text disappears on hover during its animation, looks like its basically being hidden by its own padding because of the negative value.
Here is a JS Fiddle as well as the code, am I missing -moz- css?
https://jsfiddle.net/CultureInspired/9435v0vy/1/
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
CSS:
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
transform: translateX(12px);
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
I've got the same issue with firefox 49.0.2, it seems like a bug.
You can solve this by using margin-left: 12px; instead of the transform you are currently using.
Here is the fix (works in firefox, chrome & ie):
body {
background: lightgray;
}
.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}
.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu_desktop li:hover {
margin-left: 12px;
}
.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}
<ul class="menu_desktop">
<li>Home</li>
<li>About</li>
<li>Press</li>
<li>Contact</li>
</ul>
Good Day, I'm trying to create a slidedown menu using some JS and CSS but it's not working. Here's the fiddle link:
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
What I want to do, is to add some cool animation when I show the hidden div. By the way, I just copied the transition effect from this site
There is a pure CSS solution. I corrected your example. Make sure that you write correct HTML code. Here is the new code and a fiddle:
HTML code:
<ul class="custom-sidebar">
<li>
Accountancy
</li>
<li>
Grade School
<ul>
<li>Goals and Objectives</li>
<li>Clubs and Orgs</li>
<li>Photo Gallery</li>
<li>Summer Tutorial</li>
</ul>
</li>
</ul>
CSS code:
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
It is usually best to avoid JavaScript if it is not needed.
yo can use jquery to create the animation like this:
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('.menu-div').hover(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideDown(1000);
}
});
});
jq(document).ready(function(){
jq('.menu-div').mouseleave(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideUp(1000);
}
});
});
and the css will be like this :
ul.hide-child{
display: none;
overflow: hidden;
}
ul li ul{
-webkit-transition: all 1s;
-moz-transition: all 1s ;
transition: all 1s;
display:none;
height:auto;
}
.custom-sidebar .post-link,.post-link:visited{
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: 0px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li{
background-color: #ebecec;
border-left: 6px solid #116b9e;
list-style: outside none none;
margin-bottom: 0px;
padding-left: 17px;
padding-top: 2px;
}
https://jsfiddle.net/gkrja9jy/5/
Alright, so I know very little about coding. I've been working for hours to customize a page, and I made substantial progress. However, I have hit a bit of a hiccup once more that has been tiding me over for the past three hours.
I began working with a page code with a large sidebar image. What I wanted to do, and would still like to do, is fade the image so it's darker, with text fading in overtop it. I've managed to get the image to fade as I want it, and I've gotten the text and title of the page to fade in properly. The problem, though, is the opacity.
This is a question I've seen asked many times, but none of the answers have worked for me. Most of the times, I'm seeing people saying that their sidebar is parented to their text. I do NOT think that is the issue with mine, as both the sidebar and the text, called the description in this instance, each have their own
I've gotten the text's opacity to be unaltered by the opacity of the sidebar, however, when I make this change, it messes up the page entirely. The description is off in a random place and the links either disappear or end up on the other end of the page.
I'm not sure what the problem is, and I would LOVE some help as this has been all I've worked on all day aside from watching Game of Thrones. I would love any and all help available, I'm quite desperate at this point and my own patience in regards to digging through the coding has run quite thin. Thank you all in advance for reading!
Here is the coding below:
/* Sidebar */
#sb {
width: 550px;
position: fixed;
height: 100%;
z-index: 1;
margin: 30px 0 0 0;
}
#sidebar {
width: 500px;
height: 100%;
padding-top: 297px;
background: url({image:Sidebar bg}) no-repeat;
float: left;
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#sidebar:hover{
opacity:.3;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#sb_border {
float: right;
width: 50px;
height: 100%;
min-height: 900px;
background: {color:Lines};
padding-top: 250px;
}
#title {
margin-left: 35px;
text-align: left;
font-family:josefin sans;
font-size: 24px;
color: {color:Blogtitle};
text-shadow: 1px 1px 1px {color:Blogtitle textshadow};
letter-spacing: 0;
margin-bottom: 10px;
opacity:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#title:hover {
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#description {
width: 235px;
margin-left: 35px;
color: {color:Description};
font-size: 8px;
text-align: left;
line-height: 10px;
margin-bottom: 10px;
text-transform: uppercase;
opacity:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#description:hover {
opacity:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease-in-out;
}
#desc b {
font-size: 10px;
}
#menu {
width: 50px;
text-align: center;
font-size: 8px;
font-weight: bold;
}
#menu a:link, #menu a:visited, #menu a:active {
text-transform: uppercase;
display: inline-block;
color: {color:Menulink};
margin-bottom: 5px;
width: 50px;
padding: 4px 0;
border-bottom: 1px solid transparent;
}
#menu a:hover {
color: {color:Menulink hover};
border-bottom: 1px solid {color:Menulink hover border};
background: {color:Menulink hover bg};
}
#pagination {
text-align: center;
font-size: 14px;
}
#pagination a:link, #pagination a:visited {
margin: 5px 0;
}
<!-- Custom CSS -->
<style type="text/css" media="screen">
{CustomCSS}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<!-- Sidebar -->
<div id="sb">
<div id="sidebar">
<div id="title">{Title}</div>
<div id="description">{Description}</div>
</div>
<div id="sb_border">
<div id="menu" style="margin-bottom: 5px;">
home<br />
askbox<br />
{Block:ifShowLink1}{text:link1}<br />
{/Block:ifShowLink1}
{Block:ifShowLink2}{text:link2}<br />
{/Block:ifShowLink2}
{Block:ifShowLink3}{text:link3}<br />
{/Block:ifShowLink3}
{Block:ifShowLink4}{text:link4}<br />
{/Block:ifShowLink4}
{Block:ifShowLink5}{text:link5}
{/Block:ifShowLink5}
</div></div>
<div id="pagination">
{block:Pagination}
{block:PreviousPage}«
{/block:PreviousPage}
{block:NextPage}»
{/block:NextPage}
{/block:Pagination}
</div>
</div>
</div>
Your problem is with positioning. You need to position <div id="description">...</div> so it lays over top of <div id="sidebar">...</div>.
You also don't need a :hover property for "sidebar" only for "description".
I made a JSFiddle example for you: Click here and hover over the image to see the effect.
Let me know if you have any questions.
Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.
I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix
There is still not animation for the transition on hover for border-bottom.
any clues? am I just not seeing something? I've read around and it all seems to be talking about the color of the text, while i'm trying to transition in the border-color.
I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.
any help would be awesome, attached is the code i'm working with.
Ok here is my html
<nav>
<ul class="nav">
<li>ABOUT</li>
<li>SERVICES</li>
<li>MEDIA</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
And here is my CSS
nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}
ul.nav {
width: auto;
height: auto;
overflow: visible;
}
.nav > li {
display: inline-block;
margin-right: 20px;
}
.nav > li:last-child {
margin-right: 5px;
}
/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}
.nav > li > a:active {
border-bottom: 1px solid #f96d10;
}
Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions
This aught to be an easy fix.
As far as I can see your problem lies by where you put the transition in.
With chrome it needs to be added to the at most parent.
Try adding it here:
.nav > li {
display: inline-block;
margin-right: 20px;
}
Also add the declaration for the -webkit- elements
for ex.
.nav > li {
display: inline-block;
margin-right: 20px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
}
See if this works and if not I'll try to build something similar and work on a solution.
I had this problem with Bootstrap 4 navbar component. My menu links had border-bottom and starting from the second one, all were invisible during menu opening on mobile.
Fixed it with transform: rotate(0); on the element with the border-bottom.