CSS background color transition issue - css

I have been having some issues with the code below. Tried looking up for mistakes. Basically, wish to change background-colour of the submit-button.
.submit-button{
letter-spacing: 0.15em;
height: 125px;
width: 300px;
font-family: Arial, Helvetica, sans-serif;
font-size: 200%;
cursor: pointer;
background-color: rgb(219, 18, 18);
color: white;
border-color: transparent;
transition-timing-function: linear;
transition-duration: 0.7s;
transition-property: background-color;
}
.submit-button:hover{
background-color: indigo;
}
EDIT
Here is the HTML code:
<!--This is my button-->
<p class= "three">
<div class= "submit-button">
Submit
</p>

The above code looks fine, I'd check the class name

For some reason, browsers sometimes have trouble parsing transition-property values that contains dashes. A workaround would be to replace transition-property: background-color with transition-property: all. See if that fixes your issue.

I have checked your code and it is working fine. But I would like to share some suggestions.
You should use a button element instead of div.
In case, you still want to use div then kindly give proper height and width so it looks like a button.
In your code, you have not closed the div tag.
I hope the above suggestion will help you.

Related

How to inherit color properties from figures to figcaptions

I'm trying to make a figure that changes the background color of the contained image when i hover over it with my mouse. I was able to do as much and then trying to go up a level by trying to change the color of the caption and the background using a class but when i hover over the image it isn't working fully.
What i tried to do was to place the class with the background and text color in the figure and thought that it would just make the caption inherit the text color but that didn't happen.
I also tried, alternatively, to give the caption its own hover property, and it does work, but not properly.
You see if I give the figure a background color and text color then only the background changes color as seen below
Before hovering
After hovering
The text is still blue and i have written it to be white.
and when i apply the code directly on the caption this happens
Not hovering on the caption
When hovering on the caption
So as you can see, the caption only lights up when my cursor is on it, but i want it to light up when my cursor is hovering over any part of the image, so what i really want to know is, if there even is a way to do this, any help would be really helpful.
Here is the code i used for this
figcaption {
color: #3a7cc4;
}
.change {
box-shadow: 0px 0px 30px lightgray;
transition: all 0.2s linear;
}
.change:hover{
background-color: #3a7cc4;
transition: all 0.2s linear;
color: white;
}
And then i changed the caption color separately, to make it change color
figcaption:hover {
color: white;
}
Edit-
Here's a working snippet as well for the code:
.change {
box-shadow: 0px 0px 30px lightgray;
transition: all 0.2s ease-in;
}
.change:hover {
background-color: #3a7cc4;
transition: all 0.2s ease-in;
color: white;
}
figcaption:hover {
color: white;
}
<div class="column change">
<figure>
<img src="https://i.imgur.com/N7vSN08.jpeg">
<figcaption>Tree Fort</figcaption>
</figure>
</div>
Assuming it is the figure that has the change class then it can set the color for the text and it can be inherited by the caption.
In the CSS given in the question however the figcaption overrides any inherited color by setting it itself. Hence it doesn't change when the figure is hovered.
So this snippet removes that and instead places the blueish color setting in the figure. This then gets inherited when there is no hovering. When there is hovering the setting of color as white gets inherited.
<style>
.change {
box-shadow: 0px 0px 30px lightgray;
transition: all 0.2s linear;
color: #3a7cc4;
}
.change:hover {
background-color: #3a7cc4;
transition: all 0.2s linear;
color: white;
}
</style>
<figure class="aligncenter size-full change"><img loading="lazy" width="477" height="587" src="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg" alt="" class="wp-image-6889" srcset="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg 477w, https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image-244x300.jpg"
sizes="(max-width: 477px) 100vw, 477px">
<figcaption>Tree Fort</figcaption>
</figure>
Note: if it is an ancestor element rather than the figure that has the change class the CSS selectors will need changing to .change figure

CSS color transition triggers multiple animations when loading the website

This is my first question in this forum so if it's not well explained, feel free to ask me for more details.
I have a color transition in all the links on my navbar, that triggers when you hover your mouse over them. This work wells, the problem is that when the website loads, all those elements began to resize or move to their initial positions.
CSS
nav{
height: 80px;
width: 100%;
background-color: rgba(250,250,250,1);
font-size: 13px;
border-bottom: 1px solid #D8D8D8;
color: #6E6E6E;
position: fixed;
margin-top: -80px;
}
nav a{
padding: 20px 20px;
line-height: 80px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
nav a:hover{
color:#00BFFF;
}
UPDATE
I have tried to make a JSFiddle with the problem, but even when the CSS and HTML is exactly the same its seem to work correctly on the demo
I have changed the transition property from all to color. This has solved the problem partially, since now the elements don't move when the page loads, but the problem now is that all links that include this color transition, when the website loads, show an initial blue color (inexistent in my CSS) taking the transition time to change to the correct color. This initial blue color is similar to the visited links standard color (but I have also used the selector a:visited without positive result.
This only happens on Firefox.
As due to my low reputation I can't post images, I have taken the blue initial tone: RGB (6,6,231)
You only need animate the color:
-webkit-transition: color 0.8s;
transition: color 0.8s;
note that I change all for color only.
note 2 you can do
transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;
Try adding script tag at footer of the html page.This worked for me.
<script> </script>

weird(probably) CSS rem calculation behaviour with animation

I was eager to see how the calculations happen with relative CSS length values. So I created this pen. Here's the code for the for the ease.
HTML :
<div class="parent">
PARENT
<div class="child">
CHILD
<div class="super-child">
SUPER CHILD
</div>
</div>
</div>
CSS :
div {
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
border:1px solid white;
background: red;
width: 300px;
height:100px;
padding:20px;
box-shadow:0 0 10px 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* Try this for compound em values */
/* font-size:2em; */
/* Notice how the calculation happens from parent to innermost child*/
/* Try this for rem */
/* font-size:2rem; */
}
When I uncomment, font-size:2em the transition works from the parent to the super-child and upon commenting it back it happens in the same order, from parent to super-child. As expected. Good.
For font-size:2rem upon uncommenting it, the font-size for all texts increases together as expected but upon commenting it back, the reduction in font-size happens from parent to the super-child.
I am wondering why? Since, rem values depend only upon the root element value, why does the engine calculate it that way? Shouldn't it have reduced their font-size together as it increased it for them?
NOTE - I tried the same in JSBin and it shows different behaviour there since JSBin reloads the entire preview frame after each change in CSS. Whereas in Codepen it happens as if only the CSS got updated without reloading the entire preview frame, much like opening up developer tools and enabling or disabling a property.

Possible bug with :active selector in Firefox?

I was compiling different methods to achieve click & show with pure CSS and I am not sure if I found a bug in Firefox. The html code is:
<span id="show6" class="show6"></span>
<div id="cont6">Ipsum Lorem</div>
The CSS uses the :active selector to make the div visible when the span is clicked:
#cont6{
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show6 {cursor:pointer;}
#show6:before { content: "Show"}
#show6:active.show6:before {content: "Hide"}
#show6:active ~ #cont6{
opacity: 1;
font-size: 100%;
height: auto;
}
(You can see it in action in Example number 6 or 8 of this dabblet. Don't pay much attention to the notes, since they are directed at me but don't really explain the examples).
If I understand :active, the effect should occur only while the span is pressed, and the moment it is released the effect should stop, however in Firefox the div keeps visible after releasing the click on the span.
Can you reproduce it or am I doing something wrong?

Why is my transition transform acting weird?

So, for my club calendar I'm trying to make a transition play where the td's will get bigger when hovered over. However, when I do, although the text inside gets bigger, the box doesn't really grow. Also, the colored boxes have this strange after-effect where the top and/or bottom portion stays bigger. Here is the fiddle (I'm new to this, so if the link doesn't work, I apologize):
http://jsfiddle.net/glenohumeral13/Lcs68/
And here is, what I think, is the relevant code:
td {
width: 35px;
text-align:center;
font-family: Helvetica, Arial;
font-size: 16px;
font-weight: 100;
transition: transform 1s ease-in;
}
td:hover {
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
I'd really appreciate if, if you can fix it, you could also take the time why the solution works because I want to be able to fix this, and related issues, in the future by myself. Thanks!
Edit: Thanks everyone for your speedy responses! I tried all the solutions, but the boxes just go white once the transition is over. Could this just be my computer in particular for some reason?
Edit: Nevermind: problem solved! Thanks everybody!
Last edit: Sorry! I was using Chrome, if it helps anybody now.
LIVE DEMO
Update:
Nowadays for modern browser (>= IE10) you don't need to prefix the property of transform in the transition declaration.
td {
width: 35px;
text-align: center;
font-family: Helvetica, Arial;
font-size: 16px;
font-weight: 100;
transition: /*transform*/ 1s ease-in;
}
(The problem was solve by removing transform so it get the default value all)
... transition: all 1s ease-in; ...

Resources