Is it possible to add a white overlay to an image using a greyscale filter in CSS? I need the overlay to be absolute positioned over the image with a white background and changed opacity setting. The catch is that I cannot use another div, so it has to be done directly through CSS. It's just a simple image within an a tag:
<a href="#">
<img src="http://placehold.it/300x200" />
</a>
The CSS used is very basic:
a img {
display: block;
max-width: 100%;
height: auto;
}
To create a fading effect, you can utilize the :after pseudo-element. Simply assign a class of white-out to your <a> element, and apply the following CSS:
a.white-out {
position: relative;
display: inline-block;
}
a.white-out:after {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,.5);
}
Another approach is to set a white background on the <a> element and decrease the opacity of the <img /> inside. Here's an example of how to achieve this:
a.white-out {
display: inline-block;
background: #fff;
}
a.white-out img {
opacity: 0.2;
}
Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...
After successfully developing several webpages, I am now ready to deploy them on my localhost. But how exactly can I go about this process? I attempted to create a virtual directory and transferred the HTML pages, CSS, JS, and images into it. Unfortunatel ...
Can the uncontrolled collapse be displayed as open by default? Below is the standard code for uncontrolled collapse, which is initially shown as a collapsed tab. <Button color="primary" id="toggler"> Toggle </Button> < ...
I have a situation where I need to select an option from a dropdown menu. Here is the code for the dropdown: <select id="customUser_id" name="customUser_id"> <option value="2" label="Friends Of Friends">Friends Of Friends</option> &l ...
When creating an app, what are the key benefits or drawbacks to consider when deciding between utilizing HTML/UIWebView for certain parts (such as styled menus and pages with complex layouts) versus going completely native? I'm eager to learn from ot ...
I recently followed a tutorial from W3Schools Now, I am looking to enhance it by adding previous / next buttons for the indicators, rather than for the slider itself Here is what I aim to accomplish: https://i.sstatic.net/qH1PQ.png Below is the code sn ...
Hey there, I am currently using two different header images - one for desktop and another for both tablet and mobile devices. I am wondering how I can automatically switch from the desktop header image to the mobile/tablet header image when the screen siz ...
Sure, it may seem evil. But what makes it so? Is it because all browsers support it? Which aspx asp.net controls are restricted in this tag? What are the reasons for avoiding this tag? ...
Can a Glyphicon be displayed in an <asp:TextBox> control? I attempted the following: <div class="col-md-10 has-feedback"> <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control" MaxLength="50" /> <i class="glyph ...
Just delving into HTML and CSS, I've created a button with the following styling: .Btns { width:200px; height:75px; background-color:lightblue; color:black; font-weight:bold; ...
Is there a way to align text in the center without shifting the starting position of the first letter? before text 1 text text text 2 text text after ...
Typically when working on responsive or mobile-first design, media queries are utilized to deliver different CSS styles based on screen size. An optimal design strategy may involve not including any images in the default (small) resolution layout. While ...
I am currently learning front-end development on my own and encountered an issue with implementing jQuery. You can find all the files for my site here: The problem I am facing is that there should be blog posts displayed between the header and navigation ...
Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...
After creating a versioned css file with the following code: elixir(function(mix) { mix.sass('demo.scss') .version('css/demo.css'); }); The file can be found at public/build/demo-34f5737738.css. According to the documentation, ...
Just as seen on SO with the B button: **bold text** Including that bold text is automatically highlighted and the cursor is placed right before the b ...
I'm currently working on a website using Vue.js and Firebase. Everything runs smoothly locally, including a button with a desired low opacity. However, when I deploy the site to Firebase Hosting, the button's opacity inexplicably changes to 1% an ...
After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...
I've been searching high and low but I haven't come across any answers yet. It caught my attention that the wunderlist mac app was developed using HTML/CSS/JS, but I'm curious if they incorporated a pre-existing UI JavaScript framework into ...
Using Beautiful Soup 4, I have successfully written code that scrapes online data from a webpage. My current challenge involves extracting data from a table, specifically targeting the 4th row. Is there a way to pass an argument to the .find() method to sk ...