blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover.

Here is the code I have been using:

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card-img:hover {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Welcome to the Motard d'Alsace website!</h1>
      <p class="card-text p1 bg-dark">Find your next motorcycle ride now.</p>
      <p class="card-text bg-dark">Or share your ride suggestions!</p>
    </div>
</div>

Appreciate any assistance with this issue. Thank you!

htmlcssbootstrap-4

Answer №1

The main issue lies in the fact that the card-img-overlay is covering the entire card-img element, which prevents it from detecting when you hover over the card-img div.

To resolve this issue, make sure to target the hover state of the parent card and exclude the card-img-overlay from the selection.

.card-img {
    transition: all 1s ease;
    -webkit-filter: blur(0px); /* Chrome, Safari, Opera */
    filter: blur(0px);
}

.card:hover > *:not(.card-img-overlay) {
    transition: all 1s ease;
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card bg-dark text-white mt-4 mb-3 border-dark">
    <img class="card-img img-fluid" src="https://www.flightnetwork.com/blog/wp-content/uploads/2018/06/header-journey11.jpg" alt="Card image">
    <div class="card-img-overlay">
      <h1 class="card-title underline">Welcome to Motard d'Alsace website!</h1>
      <p class="card-text p1 bg-dark">Find your next motorcycle ride now</p>
      <p class="card-text bg-dark">Or share your ride suggestions!</p>
    </div>
</div>

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

The labels assigned to buttons will direct users to unique links specifically designated for that button

I've been working on a website to share some code I created, but my skills in HTML and CSS are not the best. Please forgive me if there are obvious mistakes. Here's the code I have so far: <!DOCTYPE html> <html> <head> ...

htmlcssw3.css

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

What could be the reason for this code not displaying buttons on separate lines rather than next to each other?

I am struggling to get the Logo to print followed by all buttons lined up side-by-side. I have experimented with different display properties within the first <div> tag such as block, inline-block, and even removing the display property altogether. ...

cssreactjsmaterial-uinext.js

Positioning <tr> elements with absolute precision within a intricate layout

I am faced with the challenge of developing a complex UI control. The structure consists of a left-side TreeTable component, implemented using a <table> element, and a right-side SVG component that displays data corresponding to each row of the left ...

htmlcsssvg

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

csslayout

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

javascripthtmlfirebasenext.jsnext-auth

Issue: AngularJS Injector Module Error

Recently started learning angularjs and trying to set up an app. Here's a simple and direct way to do it: Angular controller: (function () { 'use strict'; angular .module('myQuotesApp') .controller(' ...

javascriptc#htmlangularjs-directiveasp.net-core-mvc

Employing HTML and CSS to restrict the number of characters in sentences

Extracting a few sentences from a JSON file and displaying it in a <p> tag. <p> Thank you all for another wonderful night spent together this past Sunday at The Hippodrome in Baltimore. Thank yo... <p> I want to f ...

htmlcss

Adjust the stroke and fill colors of an SVG element when hovering over it

I am facing a challenge with an SVG image that I have: https://i.stack.imgur.com/r4XaX.png When hovered over or clicked, it should change to https://i.stack.imgur.com/EHRG2.png Current Icon <svg width="24" height="24" viewBox="0 0 24 24" fill="non ...

javascriptcssreactjssvgfigma

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

React splits the page and interrupts the scroll event listener

For some reason, my webpage has been split by the React.js library. When attempting to scroll down while hovering over the top navigation menu, scrolling becomes impossible. However, scrolling works fine when done on any other part of the screen. I' ...

javascripthtmlreactjs

Maximizing the height of a flex container

Two flex containers are utilized: one for the navigation bar and the other for the page content. To make the content occupy the entire height of the page, the container's height was set to 100vh. However, a challenge arose when the navigation bar&apo ...

htmlcssflexbox

"Problem with the Hide/Show Load feature: it's not functioning

After a user submits a form, my script shows 2 divs and hides 1 div. The form's target is an Iframe on the same page. I am looking to delay the Hide/Show events until the Iframe loads. I was successful in accomplishing this with a loading animation, ...

javascriptjqueryhtmlcssiframe

Disabling the underline style on a4j:commandLink

Current Software Versions: Apache MyFaces 2.0 Rich Faces 4.3 Migration Challenge: We are in the process of upgrading from JSF version 1.2 to JSF version 2. One issue we have encountered is that there is no native support for sorting in rich:dataTable. ...

cssjsf-2richfaces

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

htmlcssfirefoxanimation

Nextjs Image Optimization: Accelerating Web Performance with Images

Encountering an issue when trying to display multiple images in nextjs. I noticed that without setting position: relative for the parent element and position: absolute for the child element, along with specific height and width values for the Image itself, ...

cssreactjsnext.js

How can you efficiently showcase multiple fetch functions on a single page by utilizing loops in PHP?

I am attempting to showcase the countries from each continent on a single page using buttons for each continent. When a user clicks on a button, I want the countries of the selected continent to be displayed. However, I am encountering an issue where only ...

phphtmlmysqlloops

What is the reason for the inconsistency in CORS post requests working for one scenario but not the other?

Currently, I am facing an issue while attempting to add email addresses to a mailchimp account and simultaneously performing other tasks using JavaScript once the email is captured. Here's the snippet of my JavaScript code: function addEmail(){ v ...

javascripthtmlcors

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

javascripthtmlcssreactjsnext.js

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

javahtmlseleniumselenium-webdriver