Dynamically change color to lighter or darker by percentage CSS
All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you're using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
There's also darken
which does the same, but in the opposite direction.
Make the hovered element go darker, but all the other elements go lighter
You don't need jquery for this, it can be done with css. Try the code below, it will give you a good idea how to make what you want.
.box { background-color: blue; height: 50px; width: 50px; margin: 10px; opacity: 0.6;}
.wrap:hover .box:hover { opacity: 0.9;}
.wrap:hover .box:not(:hover) { opacity: 0.4;}
<div class="wrap"> <div class="box a"></div> <div class="box b"></div> <div class="box c"></div> <div class="box d"></div></div>
Lighten svg part on hover without knowing original color
You could potentially do it by creating a white div in front, and adding an alpha channel to make it partially transparent.
Try running the snippet below and see if it does what you need.
.box { width: 100px; height: 100px;}.box:hover::after { content: ""; background-color: rgba(255,255,255,0.25); width: 100%; height: 100%; display: block;}.blue { background-color: blue;}.red { background-color: red;}.black { background-color: black;}.yellow { background-color: yellow;}
<div class="box red"></div><div class="box blue"></div><div class="box black"></div><div class="box yellow"></div>
Lighten individual background-color with hover by scss - how?
Use a mixin, like so:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
Related Topics
Mobile Menu Open & Close Buttons Display in Chrome But Not Safari
Adding Call Outs to a Highcharts - Stacked Bar
Visited Links Color Not Changing in Ie 8
Styling an Input Button Using "Sliding Doors"
Watermark Background Images in Div
Rotating Animation Doesn't Work with Chrome
How to Simplify These CSS Selectors
A Styled Ordered List Whose Nested List Should Have Numbers with Letters Using CSS Counter Property
Cannot Get CSS to Work in Itextsharp (5.4.3) When Making Pdf
Multiple Navbars on The Same Page with Twitter's Bootstrap 3
Card Back Hidden on First Transition in Chrome
Succinct Way of Specifying Two or More Values for an Attribute in CSS Selector
How to Position Element in The Correct 3D Position with CSS Perspective