Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected.

HTML:

<div class="container-city">
  <div id="gradient-top">
    <h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
  </div>

  <div id="gradient-bottom">
  </div>
</div>

CSS:

.container-city {
  background-image: url("img/1652.png");
  width: 100%;
}

#gradient-top {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

#gradient-bottom {
  background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}

Question:

Is there a simpler method to achieve fading at both the top and bottom simultaneously?

Current Result:

https://i.sstatic.net/uGq54.png

htmlcsslinear-gradients

Answer №1

To achieve the desired effect, one straightforward solution is to incorporate a linear-gradient with multiple stops into the background-image. Additionally, centering the title both vertically and horizontally will help create the visual impact you are aiming for. You can fine-tune the fading effect by adjusting the percentage values of the gradient color stops. Consider implementing the following code snippet:

.container-background {
  background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
  width: 100%;
}

.container-title {
  text-align: center;
  margin: 0 auto;
  padding: 60px 0;
}
<div class="container-background">
    <h2 class="container-title">TITLE</h2>
</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

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

What is the best method for choosing the next item with jQuery?

I am facing an issue while trying to apply some design on the next element. The error message that I am encountering is: Error: Syntax error, unrecognized expression: [object Object] > label Below are my selections for browsing by category: BROWSE BY ...

javascriptjquerycss

Having trouble using jQuery to target the element "(this)"?

Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...

jqueryhtmlcsshover

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

jqueryhtmlajaxforms

Step-by-step guide to creating a dropdown menu within a form element, with a variety of selectable values generated in

I am dealing with an array of employees who are assigned tests by a Lead. When tests are being assigned, the selected employee is allocated correctly. Upon review, the Lead can easily see which test is assigned to each employee. However, when the table is ...

htmlangular

Only one ID is recognized by jQuery

I have a group of three checkboxes set up like this: <input id="image_tagging" class="1" type="checkbox" value="1" checked="checked" name="data[image_tagging]"> Now, I've created an AJAX function (which is functioning correctly), but it seems ...

javascriptjqueryhtml

Arrange divs adjacent to each other without any gaps in between

My HTML code includes elements from Twitter Bootstrap and AngularJS framework. <div class="item item-custom-first"> <select class="form-control" style="display:inline; float:right" ng-model="requestdata.units ...

javascripthtmlcsstwitter-bootstrap

Is this code in line with commonly accepted norms and standards in Javascript and HTML?

Check out this Javascript Quiz script I created: /* Jane Doe. 2022. */ var Questions = [ { Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 }, { Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: ...

javascripthtmlprotocols

Arrange Bootstrap columns based on the available space within a loop

The content is contained within a md-8 div and generated through a PHP loop. The loop includes sections for: 1. about us 2. areas we cover 3. job board 4. candidates 5. join us 6. contact Due to the limited height of the "areas we cover" section, th ...

phpcsswordpressbootstrap-4

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

c#html.netvisual-studio-2012coded-ui-tests

Choose all the items that share a specific hue?

How can I target all elements with a specific color? I need to update all text that has a color of #1a0dab to #00b0f4. ...

cssuserstyles

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

javascriptcsstypescriptweb-componentnative-web-component

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. {% if cart.total_price > 0 % ...

javascripthtmljqueryajaxshopify

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

Height of Owl Carousel on mobile devices

On my desktop, I have an image that covers the entire screen using Owl Carousel. However, when viewed on a phone device, the same image only takes up one-third of the screen size. How can I adjust the height so that it appears taller on a phone? I' ...

cssflexboxowl-carousel

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

My CSS file is linked in 'main/static/css/style.css' and my pages are located in 'main/templates/main/pages.html'. However, the CSS does not seem to be working properly for some pages; for example, the h2 tag is not taking on the specif ...

pythonhtmlcssdjango

Creating a multi-column ordered list that spans multiple pages is a great way to organize and

My goal is to showcase a numbered list in a three-column format, following the guidelines presented in this particular query. However, I am looking to maintain the continuity of the list across different pages by ensuring that the subsequent item on the ...

htmlcss

Revamping jQuery code to connect table rows with dynamic links following the integration of AJAX search functionality in the table

My HTML table was originally populated with server information and had a jQuery function that allowed users to click on the table rows to follow dynamic links based on the corresponding id in each row. I then added a script for a search/filter function us ...

phpjqueryhtmlajax

Navigate one level up or down from the current tag that contains a specified value by utilizing Scrapy

To extract the price text from within the custom-control / label / font style, I must use the data-number attribute data-number="025.00286R". This unique identifier differentiates between control section divs based on the letter at the end. <d ...

pythonhtmlweb-scrapingscrapy