I'm trying to make an NVG effect using CSS any ideas I don't know where to start and how to add glow and noise effect and all that stuff.
If anyone knows any tips or tried something like that before please guide me thanks <3
If you want a 'real' infrared feel, you need to invert the colors of an image and desaturate the result. The inversion will make it feel like objects are glowing. Mix it with a shade of green and you have your NVG.
div {
background-color: green;
}
img {
display: block;
width: 100%;
object-fit: cover;
filter: invert(100%) saturate(0%);
/* To blend with parent background use: */
mix-blend-mode: multiply;
}
<div>
<img src="https://picsum.photos/600?random">
</div>
This is the answer to your question you can play with
background-blend-mode
to achieve different kinds of effects
div{width: 50vw;
height: 50vw;
background-image: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); /*Photo From Unsplash https://unsplash.com/*/
background-color: green;
background-blend-mode: overlay;
}
<div></div>
It's just that simple:
Adding the image to a div
Adding a radial-gradient with green and black to the div
Adding a mix-blend-mode with overlay to the image itself
The code:
div{
width: 300px; height: 300px;
background-image: radial-gradient(green, black);
}
img{ mix-blend-mode: overlay; }
<div>
<img src="https://source.unsplash.com/300x300">
</div>
Related
I'm curious nobody asked this question yet:
I'm creating a progress bar as a react component.
I want to fill this progress bar with a linear gradient.
But I also want to display only the completed percentage of that background-color.
I didn't find how to resolve that.
Here is my CSS code:
.ProgressBarContainer{
height: 24px;
width: 250px;
background-color: lightgray;
}
.ProgressBarGradient{
height: 24px;
width: 75%;
background-image: linear-gradient(to right, #a83e4c , #489668);
}
.ProgressBarFiller{
height: 24px;
width: 75%;
}
And here is the JS:
const ProgressBar = (props)=>{
return(
<div className={classes.ProgressBarContainer}>
<div className={classes.ProgressBarGradient}>
<div className={classes.ProgressBarFiller}></div>
</div>
</div>
)
}
Here is what is displayed at the moment
I want, in fact, to display only red as long as I'm under 20% width, And to display the green only if I approach the 100% ..
Thanks to the comment, the solution is to use the 3rd div to hide part of the 2nd div.
.GradientHider{
height: 24px;
margin-left:50%;
background-color: lightgray;
}
And I realize that the first div was useless ..
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.
How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's
I'd actually want to change an image when someone hovers the mouse over the image.
Lets say I have an image:
<img src="image.png"/>
I want to change it with the following effects on hover:
The image should be clickable, so it should be a link which redirect users to another page
The image's background should be black-ish, with opacity
On the image it should appear an other image in the middle
How is it possible to do it?
I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
you can make it like this:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? just ask