What is the best way to perfectly match a blurry background image within a card?

Hi there, I am new to CSS and trying to create a card with a blurred background. However, I have encountered an issue where the blurred image overflows on the border of the card.

I tried using -webkit-filter: blur(8px) in a separate div for the image but it didn't work quite as expected. Here's a snippet of my code:

.card {
  padding-top: 66.6%;
  border-radius: 0.8rem;
}

.bg-image {
  background-image: radial-gradient(rgba(230, 230, 230, 0.3), rgba(39, 39, 72, 0.2)), url("images/prototype.png");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: absolute;
  margin-top: -72.5%;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.toolsButton .card {
  background: transparent;
  cursor: pointer;
  transition: all 250ms ease;
  transform: scale(1);
  border: solid 3px #272748;
}

.toolsButton:hover .card {
  background: transparent;
  transition: all 250ms ease;
  transform: scale(1.05);
  border: solid 3px #272748;
}

.toolsButton:active .card {
  background: transparent;
  transition: all 150ms ease;
  transform: scale(1.1);
  border: solid 3px #272748;
}
<div class="row justify-content-around">
  <div class="col-9 col-xl-5 col-md-5 text-center toolsButton">
    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
      <div class="card">
        <div class="card-body pt-3 row justify-content-center" style="height:fit-content;">
          <div class="bg-image"></div>
          <div class="col">
            <span><?php echo $content; ?></span>
          </div>
        </div>
        <input type="SUBMIT" name="app" value="<?php echo $content; ?>" style="opacity: 0">
      </div>
    </form>
  </div>

If you have any suggestions or solutions, please let me know. Thanks in advance!

Answer №1

To enhance the appearance of the blurred image, consider scaling it up slightly. Adjusting the position can also prevent the blurred edges from extending beyond the boundaries of the parent element. To address this, apply overflow: hidden; to the .card-body class in your CSS stylesheet to conceal any overflow.

Utilizing overflow: hidden effectively conceals any content that exceeds the container's dimensions. By implementing this technique, you can ensure that the blurry edges remain hidden and maintain the desired visual impact.

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

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Struggling with disabling all checkboxes in a PHP form when the NONE option is selected. <h5>HEALTH OF STUDENT</h5> <p>Any physical, emotional, or other difficulties to be aware of?</p> <table> <td>Hearing ...

Variety of perspectives on Magento products

Is there a way to configure Magento 1.7 to display view.phtml for bundled products and view.phtml for simple products, or the other way around? I am looking to customize the views for different product types - what is the best approach to achieve this? ...

CSS Tutorial: Creating a Dynamic Gradient Bar

I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations. This is a snippet of what I have tried so far: HTML: <b ...

I've been attempting to adjust the currentTime of an HTML5 video element within a React JS environment, but for some reason it keeps reverting

Need help updating the currentTime of an HTML5 video element with a slider in React JS. My issue is that whenever I adjust the slider, the value resets to 0. The problem seems to be related to the handleChange function which updates the videoRef.current.cu ...

The significance of !important declarations within media queries

I am currently utilizing zurb foundation. The issue I am facing is that regardless of the viewport size, the body background color always remains red when using the code below: @media only screen and (min-width: 64.063em) { .body {background: red;} } @me ...

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

Image taking up the full width placed within a container with a set width dimension

https://i.sstatic.net/d1WWJ.png I am trying to make sure that the images expand to fill the entire width of the div they are placed in. Mainly using Bootstrap 4 for styling, but also incorporating some additional elements... <div class="row py-5"> ...

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

Tips for styling carousel images seamlessly (HTML/CSS/Bootstrap4)

I am a beginner in HTML, CSS, and Bootstrap and I am currently working on implementing a carousel on my webpage. Although the carousel is functional, I am facing an issue with the images not fitting properly on the page. The size of the images appears to ...

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

I'm attempting to create a setup that cycles through different images <div id="img_box" class="shadow" onload="imgCycle(1)";> <img id="1" class='opaque imgbox selected' src="media/img ...

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

I am facing an issue with a contact form where I have included a link to refresh a captcha code upon clicking. Additionally, there is jQuery code that ensures a div remains open by applying CSS styles to it. Both of these functionalities work independently ...

Stopping or pausing the scrolling items at their current position when the mouse hovers over them, and then resuming when the mouse leaves

In my React page, I am attempting to create an infinite scroll list of items that starts at the bottom and ends at the top of a div. While I have been able to achieve circular scrolling, I am struggling with pausing the scroll when the mouse hovers over t ...

Creating a visually appealing background image using WordPress and PHP

Currently struggling with adjusting the width of an image that's set as a background in Wordpress. The text is perfectly centered, but the background image remains full size and I want it to match the container size... You can view the image at the t ...

Display a timer on a webpage

Looking to incorporate a count up timer onto my website - essentially, a label displaying 0:00:00 should gradually change to show 0:00:01, and continue in this pattern until the stop button is pressed. Is there an uncomplicated JavaScript/jQuery solutio ...

What is the best way to use JavaScript to access all child classes and their respective tags of a parent element in an HTML document?

I am in the process of designing a webpage where users can select a dish by checking a checkbox, and then specify the quantity they would like to order. I want to implement a logic where the quantity of a dish only increases when the checkbox for that dish ...

Ways to adjust the visibility of the table of contents based on varying screen sizes

I am currently using a JavaScript code to dynamically generate a table of contents from H2 tags, and it's working flawlessly. However, I would like the table of contents to have a status of "Hide" (requiring clicking on "Show" to display the table of ...

What is the best way to update inventory availability on Shopify following adjustments to product variations?

While working on my Shopify store, I managed to find a code that displays the available quantities in stock with a visually appealing effect on the product page. However, I noticed that this code doesn't refresh when selecting different variants of th ...