I'm attempting to add a greyed out effect to specific sections of an image (two stripes on the left and right). Is there a CSS-only solution for achieving this?
I am aware that filters can be used (e.g. filter: grayscale(100%)), but I only want certain parts of the image to be grey, not the entire thing.
Unique CSS Method without additional elements
HTML
<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>
CSS
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}
.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}
Place a div on top.
<div id="overlay">
<img src="path/to/file.jpg" />
<div id="mask">
</div>
<style>
#overlay {position: relative;}
#mask {
position: absolute;
top: 123px;
left: 123px;
width: 42px;
height: 42px;
background: rgba(255,0,0,0.5);
}
</style>
If you want to add a greyscale filter to an image, you'll need to layer two images on top of each other. The first image should have the greyscale filter applied and clipped to the desired size.
<div class="image-container">
<img class="image-grey clip" src="http://placekitten.com/200/150" />
<img class="image-coloured" src="http://placekitten.com/200/150" />
</div>
Here's the CSS code:
.image-coloured {
z-index: 0;
position: absolute;
}
.image-grey {
z-index: 1;
position: absolute;
-webkit-filter: grayscale(100%);
}
.clip {
clip: rect(0px,60px,150px,0px)
}
You can view and test this setup on Fiddle.
I need help with a div that has its height set to 0px initially, and I want it to increase to 300px when a button is clicked. When the button is clicked again, I want the height to go back to 0px. Here's the CSS code: nav{ height:0px; overfl ...
I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...
I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...
When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...
Currently in the process of constructing a fresh website, I find myself in need of a solution to a particular issue (specifically involving PHP, MySQL, and Zurb Foundation). The challenge at hand is to fashion an image comprised of 1,000,000 pieces, each ...
I am interested in adding a video background with text overlay on my website, similar to what can be seen here: Although I understand it involves CSS, I am struggling to achieve the desired effect. Here is the code snippet I have been using: video#bgvid ...
I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited. So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I iden ...
My CSS button has a border added, but it doesn't seem to be showing up. Can anyone provide suggestions on how to fix this issue? Below is the snippet of the code: body { background: grey; } a.button { display: inline-block; -webkit-appearanc ...
Hey everyone! I've run into a little problem that's driving me crazy, so I figured I'd reach out for some assistance. Here's the situation: In my file structure, I have a root file that includes index.html, /css/, /pages/, and /images/ ...
I have a container with 9 square-shaped divs that I want to arrange in the following layout: It should resemble something like this: _________ ____ ____ | A | B | C | | |____|____| | | D | E | |_________|____|____| | F | G | ...
Update on 2020/02/23: I have made some additions to my project. Apologies for the lack of information provided earlier. The project I am working on is a modified version of the [Gatsby + Netlify CMS Starter][1]. In the process, I swapped out all.sass wit ...
Is it possible to combine multiple transforms in a single element to create a unique end result? It seems that when applying multiple transform properties to an element, only one of them will be recognized. For example, trying to transform a div with bot ...
My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods: Using plain JavaScript for ...
Is there a simpler method to display one div and hide all others, with the first one shown by default? My current solution using jQuery works, but it feels lengthy. I believe there might be a more efficient way to achieve this. Here is the code snippet: ...
Is there a way to target only the initial occurrence of an element without affecting any nested elements? I specifically want to single out the first ul element within the #menu container, without selecting any children or descendants. For instance, using ...
I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...
I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...
Almost done with my website homepage, but I'm noticing some pesky borders/outlines on mobile devices. This issue doesn't seem to pop up on computers, so you'll need an iPhone, tablet, or smartphone to see what I'm talking about. Check o ...
Looking for a solution to create images for dynamic text but facing an issue with reading folder names from a specific directory. The challenge is that the folder names can be anything, but the client wants them to appear as images only. The idea of plac ...
I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items? Here is my code: $(function() { $('.embedContainer > .myPosterImage& ...