Is it possible to create a blurred effect on an image while preserving the clarity of text within

I have been attempting to create an effect where the image blurs and then reveals text. However, I have encountered issues where the image either blurs completely or behaves strangely.

My code is behaving oddly, almost like it's giving a signal. (I'm using Bootstrap)

.card-blur{
   z-index: 1;
}

.card-blur:hover {
  /* filter: blur(5px); */
  z-index: -1;
  filter: blur(5px) grayscale(1);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dfc1dd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

I suggest enhancing the image with a blur effect and displaying the text on hover.

To achieve this, you'll need to detect the hover event on the parent element and modify the children accordingly.

For implementing the blur effect, the following code snippet is crucial:

.card:hover > .card-blur { ... }

To reveal the text on hover, use the following code:

.card:hover > .card-img-overlay { ... }

Please refer to the code snippet provided below for a better understanding:

/* Hide the overlay */
.card-img-overlay {
   z-index: -1;
}

/* Apply blur effect on image when card is hovered */
.card:hover > .card-blur{
    filter: blur(5px) grayscale(1);
}

/* Increase z-index to display text on hover */
.card:hover > .card-img-overlay {
  z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869884">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
"

Answer №2

#card-blur:not(:hover){
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

Feel free to experiment with this code in your CSS file.

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

Using regular expressions to extract information from HTML code with the JSoup library

I am working on extracting values from a web page source file using HTML rules that I currently have: e=d.select("li[id=result_48]"); e=d.select("div[id=result_48]"); Here are the relevant HTML tags: <li id="result_48" data-asin="0781774047" class="s ...

javahtmljsoup

Looking for a custom header logo that seamlessly blends with your image slider?

I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...

htmlcss

The PHP counter conceals the comma upon loading and does not display it permanently

I'm currently working on a PHP counter and encountering an issue with the comma display. I have implemented Number Format in a PHP function to print counter digits with commas every 3 digits, but the comma doesn't remain visible after the page lo ...

javascriptphpjquerycsswordpress

Iterate over the array and eliminate any stylesheets

Currently working on a website using WordPress, and dealing with some unwanted css files that come with certain plugins. I've been attempting to remove these stylesheets with JavaScript but keep running into an error saying Failed to execute 'qu ...

javascripthtmljquery

Removing classes from multiple cached selectors can be achieved by using the .removeClass

Currently working on enhancing some JavaScript/jQuery code by storing selectors in variables when they are used more than once to improve performance, for example: var element = $("#element"); element.hide(); However, I am facing difficulties while tryin ...

javascriptjqueryhtmlcsscaching

Temporary redirection of external links page

There is a specific feature I am trying to implement on my website, but I am having trouble figuring out how to make it work seamlessly. When a user connects to my website and starts navigating through the menus, I want them to be redirected to a specific ...

javascriptjqueryhtml.htaccesshttp-redirect

Is it possible to line up two divs perfectly?

Hey there, I'm still trying to get the hang of CSS and using Dreamweaver CS6's fluid grid layout. In my attempt to create a header with two divs inside it - headerleft for an image and headerright for text - I've run into some alignment issu ...

csshtmlalignment

Centering the Navbar in Bootstrap 3.0

I am currently in the process of migrating my project from Bootstrap 2.3.2 to Bootstrap 3. Unfortunately, I am facing issues with centering the navbar links, something that I was able to do easily before. Previously, I used this method: Center bootstrap&# ...

csstwitter-bootstrap-3

Implementing a sticky header for tables using Bootstrap

I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...

htmlcsstwitter-bootstrapbootstrap-5sticky

I encountered an issue while generating a crypto address on the Waves blockchain using the @waves/waves-crypto library in TypeScript

Encountering an issue with finding "crypto-js" in "@waves/waves-crypto". Despite attempts to uninstall and reinstall the module via npm and importing it using "*wavesCrypto", the error persists within the module's index.d.ts file. I am attempting to ...

javascripthtmltypescriptwavesplatform

Tips for ensuring the footer remains at the bottom of the page

I'm struggling with positioning my footer at the bottom of the page. No matter what I try, it just doesn't look right. Here's the code snippet I've been working with: <div id="footer"> <div class="container"> <div ...

htmlcssbootstrap-4

Directing BeautifulSoup to a specific <tr> class

I'm currently working on a project where I need BeautifulSoup to extract the numbers located in the "Units Sold" column: from bs4 import BeautifulSoup from urllib import urlopen html = urlopen('http://www.the-numbers.com/home-market/dvd-sales/2 ...

pythonhtmlbeautifulsouphtml-parsing

What is the best way to align HTML elements in a single row?

I have the following code snippet... <div class="header"> <div class="mainh"> <div class="table"> <ul> <li><a>smth</a></li> ...

htmlcssalignmenthtml-liststext-align

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

"Modifying the content:url() with JavaScript: A step-by-step guide

Hello, I am currently working on creating a traffic light using an array of images. My goal is to change the image path specified in the CSS when a button is clicked, to change the appearance of the traffic light. In this case, the 'content.url()&apos ...

javascripthtmlcss

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

cssdjangodjango-admindjango-3.1

Execute CSS within jQuery code only when the body class is present

I am attempting to use CSS (display: none;) within a script to hide elements from my menu only if a specific language is active. When the body class changes from one language to another, I want the script to check if the body class of a certain language ...

javascriptjquerycsswordpress

Generate a new tree structure using the identifiers of list items within an unorganized list

Attempting to convert the id's of li's in a nested unordered list into valid JSON. For example, consider the following list. To be clear, the goal is not to create the UL list itself, but rather the JSON from the li id's <ul class="lis ...

javascripthtmljson

I'm searching for the HTML5 specifications and information on which browsers support specific features. Can you point me in the right direction

Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...

htmlbrowser

Leveraging Generic Types in React with TypeScript for Dynamically Assigning HTML Props based on Element Tags

I am frequently in need of a component that is essentially just a styled HTML tag. A good example is when I want to create beautifully styled div elements: // Definitions const styledDiv = (className: string) => { const StyledDiv = React.FC<HTMLA ...

htmlreactjstypescriptgenerics