Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

Hey there, I've recently started my journey into web development and have encountered a roadblock. I'm trying to blur the background image of a div on hover without affecting the text inside.

I have an id called c1 where I used a javascript function to display text on hover, which is working perfectly fine.

Now, I am looking for a way to use CSS or JavaScript to blur the background image while keeping the text sharp. Is this something achievable?

Here's my current CSS:

#c1 {
    float: left;
    width: 300px;
    padding: 30px;
    margin: 15px;
    background-image: url(images/cd.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    height: 150px;
}

#c1:hover {
    -webkit-filter: blur(5px);
}

This is how it looks in my HTML:

<div id="productos">
    <a name="jproductos"></a>
    <ul>
        <div id="c1">
        </div>
    </ul>
</div>
javascriptcssimagetextblur

Answer №1

#c1 {
 position:relative;
 float: left;
 width: 300px;
 padding: 30px;
 margin: 15px;
 border-radius: 20px;
 height: 150px;
 overflow:hidden;
}

#c1:after{
 content:'';
 display:block;
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 bottom:0;
 right:0;
 background: url(images/cd.png) no-repeat center;
 background-size: cover;
}

#c1:hover:after{
 -webkit-filter: blur(5px);
}

Answer №2

To achieve this effect, you need to restructure your HTML code. Create a relative container and place the image and text in separate divs:

<div class="container">
    <div class="image"></div>
    <div class="text">Text</div>
</div>

.container{
    position: relative;
}

.image, .text{
    position: absolute;
    top: 0;
    left: 0;
}

.image{
    -webkit-filter: blur(5px);
}

By separating the text and image into different elements within the container, you can apply the blur effect only to the image while maintaining the appearance of the text overlaying the image.

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

Require modifying the radio button's value based on the presence of a certain class in an input field

Feeling overwhelmed. I am currently working on implementing a credit card auto system using the Stripe Payment plugin, but I find myself at a loss. Specifically, when a MasterCard is entered in the card number input field, it should receive the "masterca ...

javascriptjqueryradio-buttonstripe-payments

Achieving a seamless blend of parent background with child background: A step-by

I am trying to make the parent background color overlap the child background color in two divs. Currently, the child's background is overlapping the parent's background. Please refer to the JS-Fiddle link below for more information: <div id=" ...

css

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

What is the best way to position an image alongside an h2 heading?

Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as thoug ...

htmlcssnext.jstailwind-css

Executing multiple JQuery post requests simultaneously

I am currently working with three functions, each of which posts to a specific PHP page to retrieve data. However, since each PHP script requires some processing time, there is a delay in fetching the data. function nb1() { $.post("p1.php", { ...

javascriptphpjqueryjson

What is the best way to retrieve text from the p tag and input it into the text field?

Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...

javascripthtmljqueryjsonjquery-plugins

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Currently, I am in the process of working on a project utilizing Next.js 13 and API routes to communicate with a database. My goal is to securely store my database credentials in a .env file, but unfortunately, the variables are not loading as expected. I ...

javascriptreactjsnext.jsnext.js13

The pagination feature for array field type is malfunctioning on Mongoose, yet it functions properly on the Mongo

I am facing an issue with pagination on the rating field of my product collection. After executing a query in the mongo shell, db.products.find({_id: ObjectId('610bd9233fdc66100f703dd4')}, {ratings: {$slice: [1,1]}}).pretty(); I received the ...

javascriptnode.jsmongodbmongoose

Why is it that when a boolean value is logged as a checkbox, it shows up as undefined?

In my code, I'm attempting to log the value of a variable named check, which corresponds to column 11 in a spreadsheet. This variable is meant to represent the state of a checkbox (true or false) based on whether it's been ticked or not. However, ...

javascriptgoogle-apps-script

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

cssreactjssassflexboxmaterial-ui

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

javascriptjqueryhtmlcss

How does Angular5 perform with Bootstrap4?

Currently working on an Angular5 application and considering integrating bootstrap into it. I imported Bootstrap4, which includes dependencies on JQuery and Popper.js. Another option I came across is utilizing CSS grid for more versatility compared to boo ...

jqueryhtmlcsstwitter-bootstrapcss-grid

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

javascriptphphtmlcsswordpress

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any sug ...

javascripthtmlcsstogglegetelementsbytagname

Align text vertically within Bootstrap carousel area

I'm struggling with centering text both horizontally and vertically in a Bootstrap 4 carousel. I've set up the bootply with a carousel, but the text is stuck in the upper left corner instead of being centered on the screen. <div class="carou ...

htmlcsstwitter-bootstrapbootstrap-4

What are some strategies for sorting information from a list that is constantly changing?

I have been working on a web application built in asp.net that receives data from a web service in JSON format. The current task is to dynamically develop controls for this application. I achieved this by creating a list of labels with stored values using ...

c#javascriptjqueryhtmlasp.net

How can Highcharts load pointStart from JSON and convert milliseconds to UTC time?

I created a Highcharts graph with data loaded from a JSON file. Handling JSON files is new to me, but I am learning. I want the Highcharts graph to display dates in the format YYYY/MM/DD (e.g., 2013/04/01) on the xAxis labels. Since I couldn't direc ...

javascriptjqueryjsonhighcharts

Preventing the dispatch function from being overwritten by an empty state

Scenario: I am currently exploring the concept of React/Redux and aiming to understand the data flow. The process involves axios dispatching actions -> reducers setting state to props -> Component rendering. As a newcomer to the Frontend world, ...

javascriptreactjsaxios

Update the chosen option of the <select> element that was generated through PHP if there is a parameter value present in the URL

I'm currently working on a code snippet like this: <select name="id" id="id"> <OPTION VALUE="null">Select<OPTION> <? foreach ($genres as $row){ ?> <OPTION VALUE="<? echo $row->id; ?>"><? echo ...

phpcss