Creating a blurred effect for a div element

Looking for assistance with adding an iOS-like blur behind text in columns using HTML code that utilizes Bootstrap 3's rows and columns layout. I have already tried applying the .transparent CSS class with blur and opacity properties, but it ended up affecting the text inside the column as well.

Here is the transparency code snippet:

.transparent{
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.4;
}

I am attempting to implement this in a specific div structure:

<div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" class="transparent">
            <h3>Some text. </h3>
        </div>

    </div>

If you have any suggestions on how to apply the blur effect only to the background of col-md-8 without affecting the text itself, your help would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrap

Answer №1

There is a unique method to achieve the desired effect you are seeking, which involves using the :pseudo element. You can view a demonstration here.

Below is the corresponding CSS code.

div.con:before{
  content:'';
  position:absolute;
  display:inline-block;
  height:90px;
  width:100%;
  z-index:0;
  left:0;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
  background:url("http://lorempixel.com/400/200");
}

h1{
  position:relative; 
  color:gold;
}
<div class="con">
  <h1>Heading</h1>
</div>

Answer №2

It is important to note that when applying a blur filter, it will affect all child elements as well. To prevent this from happening, consider separating the text into a separate div element.

Answer №3

Sadly, when you apply a filter effect to a parent element, it also impacts its children, which is regrettable but makes sense. One solution could be to insert another div inside the .col-md-8 div, make it fill the dimensions of the .col-md-8 div, and then add the blur effect. Check out this JS Fiddle for example: http://jsfiddle.net/k4o1p3u5/

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="blur"></div>
        <h3>Some text. </h3>
    </div>

</div>

Here's the CSS:

 .blur{
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.7;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ccc;
    display: block;
}

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 position the search bar on a new line within the navigation bar when the screen size is at its maximum width for mobile

I have a search bar on my navigation bar, but I am looking to move it to the next line within a maximum width if the screen display is extra small (xs) or for mobile devices. Below is the code snippet: <nav class="navbar navbar-expand-md fixed-top ...

htmlcsssearchlayoutbootstrap-4

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

Attempting to utilize CSS to address a persistent problem in Chrome where the page orientation options briefly appear when printing before being hidden

I am struggling to print a webpage in landscape orientation using the chrome browser, but I don't have control over the page's settings. You can see the issue discussed here: Chrome Print dialogue not offering fit to page, landscape, other prin ...

htmlcssgoogle-chromeprintinglandscape

Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference: This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :) HTML <section class="container ...

htmlcssheighttwitter-bootstrap-3css-tables

When utilizing a JQuery .animate function to transition a div from 0px to 450px in height, an unintended margin is produced during the process

I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath i ...

jquerycssjquery-animate

What is the best way to create a loop that is constantly changing?

Below is a PHP array that I am working with: echo "<pre>"; print_r($notifications); /* output: Array ( [0] => Array ( [score] => 120 [type] => 5 [post_id] => 1 [subject] => ...

phphtmlarrays

Ways to show text in a password field

I'm looking to have the password field on a page. I'd like to show the text "Enter password" on the screen before the user starts entering their password, but once they focus on the field to enter their password, it should switch back to password ...

javascriptjqueryhtmlpasswords

Fullcalendar Bootstrap popover mysteriously disappears

I'm having issues with my Bootstrap popovers being hidden under the rows in FullCalendar. I've tried using container: 'body' and trigger: 'focus', but they don't seem to work. The function that's causing this proble ...

javascriptjquerytwitter-bootstrapfullcalendar

Verify the accurate sequence for arranging the items in the drag and drop list

I am currently developing a Language learning platform that includes several web applications. I am still new to javascript and struggling to find a solution for one of my apps. This specific app involves draggable list items that need to be arranged in t ...

javascriptjqueryhtmldrag-and-dropjquery-ui-draggable

Retrieve information from an HTML form, make updates to the database, and exhibit the data in a table on the current page with the help

I'm in need of some assistance. I have a small application that utilizes a Java Servlet and an HTML form. The user enters data into the HTML form, and upon clicking the submit button, the Java servlet retrieves this data in its post method and stores ...

javahtmlajaxservletshtml-table

Verifying the presence of a popover

Utilizing bootstrap popover in my project, I am encountering an issue where the target variable may not always exist on the page. Currently, I am displaying the popover using the following code snippet - target = $('#' + currentPopoverId.data(& ...

javascriptjquerytwitter-bootstrap

Conceal a form field depending on the data retrieved from a database in PHP

I need assistance with hiding an input field based on the chosen value from a dropdown. There are two values, stone1 and stone2, that are automatically populated from a database. My goal is to hide the "karat" input field if stone1 is selected, hide the "c ...

javascripthtmljquerycss

The datepicker widget only shows days and not months

Hey there! I'm having an issue with the datepicker feature. Instead of just showing the months, it's displaying both the days and months like this: https://i.sstatic.net/RkJcO.png But I want it to look like this: https://i.sstatic.net/ZKpGr.pn ...

javascriptjqueryhtml

Reset input field value upon triggering a JavaScript alert

I am facing an issue with a dynamic field that receives its value from the database. I need to compare this value with an old value and trigger an alert if it is greater. In such cases, I want to reset the field back to an empty value. I am trying to achi ...

javascriptphpjqueryhtmlgetelementsbyname

Trouble with integrating jQuery Mobile data-role page into a PHP project

Why am I encountering issues when trying to link to the data role page <div data-role="page" id="sessionrecordsuccess"> in the main.php file? Instead of directing me to the specific section, it keeps redirecting to the top of main.php. I have another ...

phphtmljquery-mobile

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

htmldjango

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

How was the HTML code on this website masked so effectively?

While browsing the internet, I stumbled upon a website and decided to take a peek at its source code. DCARD You can find screenshots here Unfortunately, the content is in Chinese. It seems like this website is similar to a forum in my country. What cau ...

javascriptjqueryhtmlajaxangularjs

Wrapping text around a container element

Is there a way to make the text wrap around a div when you want the div positioned at the bottom of a container? I've been able to align the text properly with the div when it's on top, but when I attempt to move it to the bottom of the page, th ...

csshtmltext

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova