What is the best way to include a black hover effect on an image?

I am facing a minor issue as a newbie web developer working on a Bootstrap 4 project.

Here is the snippet of my code:

<section class="front-banners">
        <div class="container">
            <div class="row">
                <div class="col-12 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty"><img class="card-img front-banner-img" src="/img/banner.jpg" alt="Kuchnie"></a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Title </h5>
                                <img src="/img/arrow-front.png">
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Poznaj ofertę</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

Along with my CSS:

.front-banner-overlay {
    background-color: rgb(255, 173, 51);
    width: 180px;
    height: 180px;
    margin: 20px;
    border-radius: 4px;
}

.front-banner-overlay h5 {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    color: #1A1A1A;
}

.front-banner-overlay p {
    font-family: Inter;
    font-style: normal;
    font-size: 13px;
    line-height: 16px;
    position: absolute;
    bottom: 0;
    color: #1A1A1A;
}

.front-banner-overlay:hover {
    color: #1A1A1A;
}

I would like to make a modification to:

<img class="card-img front-banner-img" src="/img/banner.jpg" alt="">

Upon hovering over the images, I wish for them to turn black and white.

Is there a way to achieve this effect?

csstwitter-bootstrapbootstrap-4

Answer №1

Here is the CSS code that you can use:

.card-img:hover{
    filter: grayscale(100%);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to modify the CSS of the sequential number element when it is clicked on?

I've successfully utilized jQuery to create sequential numbering for my menu items. Upon clicking, the hyperlink text changes color to red. However, I'm facing an issue where I want the corresponding number to also change to red when the hyperli ...

javascriptjqueryhtmlcss

Issues with Bootstrap nav-tabs functionality have been reported in the 4.6 version specifically within an asp webform environment

I am currently working with Bootstrap 4.6 and attempting to utilize the nav function to create navigation tabs. However, I am encountering an issue where clicking on another tab does not trigger the expected behavior. The code snippet in question is as fol ...

jqueryasp.netbootstrap-4

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar. For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy ...

cssweb-applicationsresponsive-designmobile-safari

Utilizing CSS to Display a Variety of Colors within a Text String

Is it possible to style different words in a sentence with various colors using only CSS, without using the span element? For instance, how can I make the word "Red" appear in red, "Blue" in blue, and "Green" in green within an h1 tag? ...

javascriptjqueryhtmlcss

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

Is it possible to have the website show up at a default size of 90% on the display

My preference is for my website to appear at 90% instead of 100%. This seems to be a common occurrence for me. Is there a way to have it default to this appearance? ...

css

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

htmlcssparagraph

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

javascriptjqueryhtmlcss

Is there a workaround for lack of border radius support in IE8 when css3PIE is not functioning

I've come across numerous versions of this question, but none have been successful for me. I'm attempting to achieve rounded corners in IE8 similar to what I see in Firefox and Chrome. Below is my CSS code after integrating css3PIE: border-top- ...

htmlinternet-explorer-8csscss3pie

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

Deactivate particular JavaScript when displaying a Bootstrap modal

On mobile devices, I have JavaScript that is preventing vertical panning on modals, resulting in users not being able to see all the modal content. Is there a way to disable this JavaScript when a modal is displayed? The following snippet of JavaScript a ...

javascripttwitter-bootstrapbootstrap-modalbootstrap-5

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

I am currently working on a corporate website and have been tasked with creating a unique design for a specific page. The design includes the following elements: A body background gradient that transitions from their primary color to white in a top-to-bot ...

javascriptjqueryhtmlcss

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

javascripthtmljquerycssscss-mixins

Elastic video player embedded in a flexbox

I'm having an issue trying to make a responsive YouTube embed work inside a flex container alongside other content. The problem is that the container for the YouTube embed doesn't resize properly and ends up overlapping with other elements. To be ...

cssreactjsflexboxmaterial-ui