Does anybody know why this is happening?
On all the anchors, I have:
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
Why is that 'flash' occurring?
Update
By flash, I mean where the the H1 goes from purple to white.
Update 2
It seems to happen almost all anchor links.
For the example which is the logo, the HTML is:
<h1 class="logo">Test</h1>
In the CSS I have:
a {
text-decoration: none;
color: white;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
The h1 is in header and for the header, I have certain CSS for the header links:
.header a {
color: white;
text-shadow: 0 -1px rgba(0,0,0,0.2);
}
And for the h1, I have:
h1 {
margin: 0;
float: left;
font-family: "proxima-nova";
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
height: 30px;
line-height: 30px;
}
Related
I'm trying to get my my button to transition on hover so the button squeezes to the left. However, there is no transition occurring on hover. Any suggestions?
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
position: static;
border: 0;
cursor: pointer;
font-weight: 400px;
}
.BtnEvents:hover {
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
Register Now!
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
border: 0;
cursor: pointer;
font-weight: 400px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
.BtnEvents:hover {
width: 200px;
}
Register Now!
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
I am trying to change the colour of an h2 tag inside a div.
The other elements inside this div change to white colour when hovered over, only the h2 does not change colour.
I know I can change this in CSS... .well.sb:hover, .well.sb:hover h2, but the bad thing with that is that the h2 part changes colour separately from the rest. When hovering over the whole thing, everything (including h2) should change text-color into white at the same time and at the same speed and for the same one big and only div section. How to make that work?
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
There are 2 things happening. First, you need to target the h2 more specifically (it's overriding your hover styles). Second, you have conflicting transitions.
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
/* -moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease; */
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
color: #FFF;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
Just remove color: #444; from h2.title-article-sidebar
Recent version of chrome tend to add transitions in nested elements (not sure about it is a bug or a feature).
Just make sure that children don't have an inherited transition
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sb * {
transition: 0s;
}
<div class="well sb">
<div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div>
</div>
This will solve it:
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
/* color: #444;*/
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
You don't have any problem in your animation as mentioned in some other answers. You have correctly written your code nor there is any specificity problem.
I am attaching a codepen link on which I was trying to solve your problem:
http://codepen.io/Sky-123/pen/mALGQZ
The animations remains intact as you have written them. The only change that I did was added the color:#444 to h2 tag through an inline statement and then removed it on hover in jQuery as it was causing concerns in animation..
Hope it solves your problem.
I built my website mostly checking Google chrome to make sure everything was correct. With my nav bar in Google chrome it is perfect, however, when in IE or Fire Fox the dimensions are changed and they do not fit together correctly.
My website is noahtarr.com
CSS:
nav {
margin-top: -1px;
position: relative;
top: 0;
left: 0;
}
nav a {
margin-left: -3px;
margin-right: -1px;
padding: 10px 20px;
outline: none;
border-right: none;
border-bottom: none;
font-family: arial;
font-weight: bolder;
vertical-align: top;
text-decoration: none;
font-size: 13px;
line-height: 21px;
cursor: pointer;
background-color: #D1DBBD;
color: #3E606F;
-webkit-transition: all .9s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav a:hover {
background-color: #91AA9D;
color:#193441;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
nav a:first-child {
border-radius: 6px 0 0 0px;
}
nav a:last-child {
border-radius: 0 6px 0px 0;
}
nav a.active {
color: #193441;
border-radius: 8px 8px 0px 0px;
padding-top: 5px;
}
nav a.adjacent-active-left {
border-radius: 0px 8px 0px 0px;
}
nav a.adjacent-active-right {
border-radius: 8px 0px 0px 0px;
}
HTML:
<nav>
<a class="active" href="home.htm">Home</a>
<a class="adjacent-active-right" href="about.htm">About</a>
Services
Portfolio
Contact
</nav>
I am trying to get a child element to change when the parent is hovered. I also want an attribute of that parent to change as well. I am trying to get the background color of #action to change and the color of the a or h1 to change when action is hovered over. Is this possible?
here is the html
<section id="action" class="general">
<div class="container">
<h1>This text</h1>
</div>
</section>
and here is the css. CSS is built using SASS that is why it is structured like that.
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-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;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
}
#action:hover a {
background-color: #76A7D1;
color: $colorDark;
}
Try this:
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-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;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
}
#action:hover{
background-color: #76A7D1;
a{
h1{
color: $colorDark;
}
}
}
You can do the same as #Alessandro Minoccheri suggested but in a less verbose way which I like particularly:
#action {
background-color: $bgLight;
border-top: 1px solid #252525;
-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;
a {
text-decoration: none;
h1 {
margin: 0;
color: $colorLight;
font-weight: 300;
text-align: center;
}
}
&:hover{
background-color: #76A7D1;
a{
h1{
color: $colorDark;
}
}
}
}
The & within #action refers to the parent element, in other words to #action itself.
I like this approach because everything gets self contained within one style declaration and is less repetitive.
It is like saying: "... and when this element is hovered apply these styles to it, and these styles to a and h1".
One small comment regarding your markup #zachstames: a (anchor element) is an inline content element, while h1 (header of level 1) is a block element. According to the W3C specifications an inline element should not contain block elements but only data.
Hope it helps.
Cheers!
This is what you want? DEMO
You are able to make this:
#action:hover {
background: yellow;
}
#action:hover a {
background-color: #76A7D1;
color: white;
}
As you can see I repeat the use of the pseudo-class #action:hover. I'm saying:
"When action is hover, change it's backgroud AND when action is hover, change the background and the font color of the a element".
Hope I've helped.
Be good,
Leonardo