Can CSS achieve a similar blur effect on a background image as seen in video production?

On my website, I have a photo section that displays random user-submitted images. I am facing the same challenge of fitting images into a frame, similar to how landscape video is adapted for broadcast television when combined with portrait cell phone video - they often use a blurred and enlarged version to fill the unused space. Is there a way to achieve this effect using CSS alone? So far, all of my attempts have resulted in the blur affecting the entire stack of images and text overlays.

<div class="h-full">
   <div style=" background: url('url');background-size:cover;filter:blur(8px);">
      <img class="h-[390px] w-full object-contain object-center" src="url">
   </div>
</div>

Desired Outcome

https://i.sstatic.net/5zads.png

My Outcome: The image appears twice in portrait mode but is ruined by the blur seeping through.

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

Extra Credit: Does this visual effect have an official name?

htmlcssimagebackground-imageblur

Answer №1

To prevent edge bleeding for blurred background images, you can utilize the backdrop-filter property. To see this in action, click on Run code snippet:

body {
  margin: 0;
  overflow: hidden;
}

.image-frame {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.image-frame .blur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  
  /* blurring */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
<div class="image-frame">
  <div class="blur" style="background-image: url(https://picsum.photos/512/512)"></div>
  <img src="https://picsum.photos/512/512" />
</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

What is the reason for elements such as "if" and "else" not being visually

I am currently developing a browser-based code editor with a unique feature. Task: The objective is to highlight specific keywords like if, else, for... when they are entered into the editor. textarea.addEventListener("input", function() { ...

javascripthtmlcssdom

Tips for preloading content into a Bootstrap markdown editor

My issue involves using bootstrap markdown and figuring out how to convert the text area content from parsed HTML. Adding text using markdown is not a problem initially, but when it comes to editing, I find myself needing to manually input what I had orig ...

htmltwitter-bootstrapmarkdown

Display larger images dynamically by hovering over thumbnails using PHP

Is there a way to display an image when I hover over a thumbnail using PHP, similar to the functionality on this website? I'm looking for a solution to implement this feature. ...

javascriptimage

Troubleshooting issues with creating a table using the "mysql_fetch_array();" function

Currently, I am working on building a webpage that retrieves data from a database and displays it in table format. However, my attempt to use the "table border" and "table-height" commands seems to have gone awry. The issue I am facing is that even thoug ...

phphtmlmysqldatatablehtml-table

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

How to implement an OR condition using EJS?

These different options both function correctly: <% if(currentUser.collegeLevel === "High School") { %> <h1>They attained a High School Diploma</h1> <% } %> <% if(currentUser.collegeLevel === "Associates Degree") { %& ...

htmlif-statementejs

Creating a table using Jade/Express.js that displays various elements in each row

Looking to create a dynamic table layout using Jade for an array of objects where three objects are displayed on each row. <table> <thead>...</thead> <tbody> <tr> <td>obj0</td> <td>obj1 ...

htmlnode.jsexpresshtml-tablepug

What is the method for retrieving the input text value contained within a select option?

I have encountered an issue in my HTML template where I am unable to retrieve the value within the input field upon submitting, especially if a custom category name was entered. The code includes an HTML <select> and <input> fields: {% for i ...

javascriptjqueryhtml

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss

Is it possible to achieve a seamless change using show/hide jQuery functions when hovering over an

How can I achieve smooth transitions when using an image map to show a div on hover, similar to the functionality seen on this website: ? Below is my current JavaScript code: var mapObject = { hover : function(area, event) { var id = area.attr ...

javascriptjqueryhtmltransition

Create a seamless typing effect in JavaScript that loops indefinitely

I've managed to tweak this code I stumbled upon to almost perfectly fit my needs, except for one thing - it keeps looping. I just want it to type "zero", delete it, and then type "one" before stopping. I've tried making some adjustments here and ...

javascriptcsstext

Display Django radio buttons in a formatted list using the mark_safe() function

Exploring the Issue In an effort to include HTML instructions and display bullet points in my form label, I utilized 'mark_safe()' within a form: class FormFood(forms.Form): CHOICES = [ (1,'Yes'), (2, 'No')] response ...

pythonhtmldjangopython-3.xdjango-forms

Is there a different way to retrieve the tag name of an element besides using

Currently, I am dealing with an outdated version (Chromium 25) of chromium. My goal is to utilize the tagName method in order to retrieve the name of the specific HTML tag being used. While I am aware that Element.tagName functions for versions 43 and ab ...

javascripthtmltypescriptchromium

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

jquerycsshtmldatecalendar

Should I experiment with smooth scrolling through an embedded link within an SVG, or perhaps adjusting the scale of the text?

In the process of developing a website, I am using an SVG as the header/navigation. Initially, I embedded the hyperlink text within the SVG like this: <a xlink:href=""> <text transform="matrix(1 0 0 1 495 160)" font-family=" ...

jquerycsssvgxlink

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

Ways to stop custom Mailchimp form from redirecting upon submission

I have integrated a custom Mailchimp signup form into a webpage I am developing. The form works well, but I would prefer to avoid the automatic redirect to a new tab upon submission, which displays a confirmation message from Mailchimp about joining the ma ...

jqueryhtmlajaxformsmailchimp

The website must automatically adjust the size of all elements on the page, including images and fonts

I am currently facing an issue with the resizing of my web page when the user changes the window size or has a different screen resolution. I have created a jQuery function that triggers on resize or page load, which helps in scaling everything proportiona ...

javascriptjqueryhtmlcsscss-transitions

Exploring ng-view navigation in AngularJS

I have come across an SEO issue while working on a static website in AngularJS. Google Webmasters Tools report no crawl errors, but when I attempt to fetch different routes, it consistently returns the same home page result. It seems to be ignoring what ...

javascripthtmlangularjsseong-view

Interact with multiple divs using Jquery .click

I have created a single page with multiple anchors, each containing unique content that pops up when clicked. The functionality is working well, but I am facing an issue where clicking on a different anchor repeats the same content as the first anchor. I w ...

jqueryhtmlcssclick