``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem persisted.

.background-image-holder {
background-image: url(../img/bg.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
filter:blur(5px);
}

<div class=“panel panel-left panel-reveal background-image-holder”>
<div class=“list-block”>
<div class=“content-block-title”>Navigation</div>
....
csshtml-framework-7

Answer №1

The div containing the list-block is nestled inside the same div that is currently being blurred. Since the div named "background-image-holder" is blurred, all of its children will be affected as well. One way to work around this is by creating a separate div within the panel, positioned before or after the list-block element.

<div class=“panel panel-left panel-reveal”>
  <div class=“background-image-holder"></div>
  <div class=“list-block”></div>
</div>

Another option, using pure CSS, is to add a before or after block for the panel div.

https://codepen.io/anon/pen/YQxMba

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

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

htmlcss

What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?

I am attempting to create cards with a unique design where the first row consists of 2 columns, one being a GIF that shows the card fitting into a cell with a border. However, all I see is an empty cell without any display. Below is the code snippet I am ...

htmlcssimagecss-grid

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer

Collapse the Bootstrap Menu upon selecting a Link

I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to prevent an element from reaching the border of the screen?

As a JavaScript beginner, I am working on creating a simple game. My objective is to prevent the player (20px x 20px) box from causing the screen to scroll. I want a fixed screen where the player cannot go beyond the edges of the screen. Below are my previ ...

javascripthtmlcssscreengame-development

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

jquerycsshighcharts

Incorporate a genre twist in animated films

Is there a way to implement an animated feature where the letters appear one by one in between a sentence, similar to what is seen on this page? On the linked page, there is a sentence displayed inside a banner that reads: Create meaningful documents Cr ...

javascriptjqueryhtmlcssanimation

Adjusting the height of a textarea within a table

My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...

javascriptjqueryhtmlcss

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

htmlcssvisual-studiokeyboard-shortcutsshortcut

jQuery accordion section refuses to collapse

In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...

jqueryhtmlcssjquery-uitwitter-bootstrap-3

scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does any ...

htmlcsstwitter-bootstrap

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

javascripthtmlcssreactjsinline

What is the best way to position a tooltip near an element for optimal visibility?

One div is located on the page as follows: <div id="tip"> Text for tip goes here... </div> And another one can be found below: <div class="element"> Text for element goes here... </div> There is also a piece of JavaScript ...

javascriptjqueryhtmlcsshover

Styling multiple divs using CSS

What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...

htmlcss

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

javascripthtmljquerycssreactjs

Yii ReCaptcha for better mobile compatibility

Incorporating the extension from http://www.yiiframework.com/extension/recaptcha/ into my Yii project has been a successful endeavor thus far. However, in an effort to enhance the responsiveness of my website, I recently made some modifications to the cod ...

cssyiirecaptcha

Create a hyperlink to the tabbed navigation menu

I want to create links to the tabbed menu for my website. The homepage has 4 categories: car, van, truck, and special, each of which leads to the portfolio page. The portfolio page includes a simple filtered tabbed menu structured like this: <ul id="f ...

phphtmlcssurltabs

The margin-bottom attribute for the final element within a div does not cause the div to be "stretched."

Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...

htmlcssmargin