I have an image that's white with a transparent background; I'd like to be able to dynamically color/tint the image on hover to another color.
My first thought was to use background-blend-mode to multiply a solid red image with my white-on-transparent image to get a red-on-transparent image. Unfortunately, this doesn't give the desired behavior and instead gives me a solid red box. Example here: https://jsfiddle.net/wcL2exa4/58/
I've looked into CSS mask but that also doesn't seem to do what I want. How can I easily turn my white image into a colored one?
thank you!
You can try using mix-blend-mode on a pseudoelement. I've used multiply and screen in the example below
document.getElementById('c').addEventListener('change', (e) => {
const mode = e.target.checked ? 'screen' : 'multiply';
document.documentElement.style.setProperty('--blend-mode', mode);
})
:root {
--blend-mode: multiply;
}
#container {
position: relative;
background: black;
width: 100%;
height: 250px;
margin-bottom: 2rem;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background: url("https://storage.googleapis.com/astrology-images/constellations/aries-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red;
mix-blend-mode: var(--blend-mode);
}
<div id="container">
<div id="constellation" class="bg">
</div>
</div>
<input id="c" type="checkbox"><label for="c">Red Background</label>
There is a way but it's a bit weird
filter: brightness(0.5) sepia(1) hue-rotate(50deg)
Change the brightness and hue rotate till you get the colour you want.
Are all background image white ?
You may do it by changing the default image to a red version, and apply some filter to it to get it white.
Related
When I double-clicked or single-clicked on the image its overlay light black background.
My question is that how to remove overlay light black background on double-click.
Note: show below attachment image. I double-clicked or single-clicked on the Pepper image.
Please help me.
Can Please refer or modify your code as given below:
HTML:
<div class="img_box">
<div class="image"><img src="Your image path.jpg or png or anything"></div>
<span></span> <!-- For adding overlay in css -->
</div>
CSS:
.img_box {
display: inline-block;
position: relative;
cursor: pointer;
}
.img_box span {
background-color: rgba(0,0,0,0.7);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
JS:
$('body').on('click','.image',function() {
$(this).next().fadeIn();
});
$('body').on('click','.image + span',function() {
$(this).fadeOut();
});
I made a transparent button:
.home-btn-left {
position: fixed;
left: 20px;
top: 20px;
background-color: transparent;
width: 100%;
height: 100%;
cursor: pointer;
}
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
It doesn't have a hover, focus or active state. But when I push it on my iphone I see this and I really don't wanna have it:
Do you have some suggestion?
https://jsfiddle.net/3bfptxty/
First off, you should apply the styles for every state of the <a> element using:
.home-btn-left,.home-btn-left:hover,
.home-btn-left:active, .home-btn-left:focus { /* your styles */ }
then you should add the otline property, to prevent dotted outline or similar behaviours
outline: 0;
Edit:
on more digging you might be searching for -webkit-tap-highlight-color, like described here
border style ridge is working in Firefox browser but not working in chrome and safari.how to fix this problem.
<div class="module">
<div>
.module {
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.module:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: red;
z-index: -1;
}
using with webkit....
try this..
I can't seem to find the exact reason why, but it isn't that your ridge property isn't working. It seems that the algorithm that the ridge property uses to determine the other color besides black, to actually show the ridge in the border, is causing there to be no difference in color.
I'd say Firefox is actually enforcing a different color besides black, because my color is darker than the black.
I used a dark grey color as a test and then the ridge shows up.
Instead of black I would use a slightly lighter tone for chrome and safari.
div {
border: 6px #151513 ridge;
}
See this visualization here where the color of the image is changed when you mouse hover the image:
http://thebandcalledboy.com/
I'm trying to replicate the same behavior. Any clues?
You can use the ":hover" pseudo-class to give a different style to an element that is hovered over. For example, if you have an element like this:
<div class="my-element">Content</div>
You can style the element differently when it is hovered over:
.my-element {
background: green;
}
.my-element:hover {
background: red;
}
The code above gives the element a red background on hover but a green background otherwise. You can use a similar technique (albeit with different CSS properties) to either select two different background images or to reuse the same image but apply a different color mask on top of it.
If you are using chrome, right on the image->inspect element. What you will get is this:
HTML:
</div>
<img src="sites/all/themes/boy/images/boy_logo.png" class="logo" alt=""/>
</div>
CSS:
element.style {
}
thebandcalledboy.com/media="all"
#center .black {
width: 96%;
height: 97%;
margin: 2%;
background: #000;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body
Style Attribute {
font-size: 7.9375px;
}
thebandcalledboy.com/media="all"
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family:'PerpetuaRegular',arial,sans-serif;
font-size: 20px;
}
Inherited from html.js.textshadow.fontface.audio.svg
thebandcalledboy.com/media="all"
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'PerpetuaRegular',arial,sans-serif;
font-size: 20px;
}
Similarly see
computed
and
event listeners there.
I think I would draw the colors onto a off screen PGraphic object and use something like the PImage blend function to mask it onto the template of the boy's face.
I have this:
<style type="text/css">
.TopBorderPanel {
position: relative;
overflow: hidden;
border-top: 2px solid #bbbb9f;
margin: 1px;
width: 500px;
}
</style>
The top border has one color , #bbbb9f, what i want to do is make it 2 colors
50% #bbbb9f and 50% #cccccc
Is it possible ?
http://jsfiddle.net/CdWCA/
.TopBorderPanel {
border-top: 2px solid #bbbb9f;
position: relative;
}
.TopBorderPanel:after {
position: absolute;
left: 50%;
right: 0;
top: -2px;
border-top: 2px solid #cccccc;
content: '';
}
Better use a background *.gif split equally into two colours, and use a single pixel of padding on the top:
.TopBorderPanel {
border: 0;
background-image: url(...);
padding-top: 1px;
}
I can think of 2 ways of doing this.
My first method would be to use a pseudo selector, what this does is add content, or styles :before or :after an element. So in effect you can have 2 styles for one element, just one as normal, and then some extras added either before or after this element.
I have added a border-top, as normal, and then added another border-top with the pseudo selector.
My second solution is to add a box-shadow, that instead of normally looking like a diffused shadow, it styled to look like a solid shadow above the element.
I've created a jsFiddle which will hopefully give you an idea, but if you don't understand just say.
jsFiddle