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:

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

Limiting ng-repeat in AngularJS when the last item on the object is reached

I have a large object being repeated using ng-repeat, and it runs smoothly on Chrome and Opera. However, when it comes to browsers like Mozilla and IE, the performance is very slow. I tried implementing pagination, which helped speed things up, but ideally ...

javascripthtmlangularjsangularjs-ng-repeat

Adjust padding of radio button labels in Qualtrics for a cleaner, more streamlined appearance

As I delve into the world of CSS, my goal is to customize the existing survey theme known as "Minimal 2014". Specifically, my focus is on minimizing the spacing in various areas to create a more compact design. So far, I've successfully reduced the g ...

cssqualtrics

The spinner persists even after the fetch api call

The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...

javascripthtmldom

Should the event happen inside a div section

How can I determine if an element is currently positioned within a specific div? I am working on a vertical scrolling menu where the height of the navigation div is set and overflow is hidden to show only a portion of the links at a time. To navigate thr ...

jquerycssscroll

Background color applied to row elements in div containers

I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...

css

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...

javascriptjqueryhtml

Is it possible to link an HTML select element to a changing array in JavaScript?

Let's say I have an empty HTML select element. <select id="options"> </select> Can I link a JavaScript array to this select so that when the array is modified, the select options update accordingly? Alternatively, do I need to resort to ...

javascriptjqueryhtml

Looking to transform a list into JSON format using JavaScript?

I have a collection that looks like this: <ol class="BasketballPlayers"> <li id="1">Player: LeBron, TotalPoints: 28753, MVP: true</li> <li id="2">Player: Steph, TotalPoints: 17670, MVP: true< ...

javascripthtmljson

Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically. <div style='width: 80%; ...

htmlcssoutlookhtml-emailtext-align

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

htmlcssreactjs

Create a custom div class specifically designed for an image button

Apologies if my title is a bit misleading, I struggled to find the right phrasing. Currently, I have images linked to various social networks using href. For instance, clicking on the facebook icon directs to my Facebook page. The layout looks like this: ...

htmlcssimageclass

Substituting Div containers with elements imported from external files

Imagine I have <div> <div id="stuff"> <!-- stuff --> </div> </div> Could I move the content of <div id="stuff"> into a separate file named stuff.html, and then replace the code above with something simi ...

htmlangularjs

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

javascripthtmlcss

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

javascriptjqueryhtmlcssajax

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

Personalize your hr tag

https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...

css

Unable to load images on website

I'm having trouble showing images on my website using Node.js Express and an HBS file. The image is not appearing on the webpage and I'm seeing an error message that says "GET http://localhost:3000/tempelates/P2.jpg 404 (Not Found)" Here is the ...

javascripthtmlnode.jsexpresshbs

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss

A static iframe or an alternative solution that is not interactive

I specialize in creating websites for my clients. When they log in, they are presented with 5 different design ideas for their site - each showcasing a unique layout and color scheme. Currently, I manually upload 5 screenshots of the designs created by me ...

phphtmliframeprintscreennon-interactive

Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...

javascriptjqueryhtmlcss