What is the best way to create a blurred border effect for my image div?

Is there anyone who can assist me with this issue?

I've attempted to use box shadow and borders, but I am having difficulty achieving transparency within the border:

<div class="" style="border-radius: 125px;
                     width: 125px;
                     height: 125px;
                     margin: auto;
                     box-shadow: 0 0 0 6px rgba(68,68,68,0.25), 0 0 0 15px rgba(68,68,68,0.35); ">
<img src="images/tracks_bg.png" width="100%" height="100%" style="border-radius: 50%; opacity: 1 !important;">
</div>

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

htmlcss

Answer №1

One way to achieve this is:

  • Create a wrapper DIV
  • Add an absolutely positioned (full-size) blurred DIV inside the wrapper
  • Add a circle with the same background image as the blurred DIV inside the wrapper
  • Experiment with using box-shadow on the circular track image DIV element

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

.player {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: #000;
}

.trackImageBlur {
  position: absolute;
  background: none 50% 50% / cover;
  opacity:0.6; /* lower opacity so we can transpare the parent's #000 bg */
  padding: 4vw; margin: -4vw; /* prevent seeing blurred-out edges */
  box-sizing: content-box; /* apply normal paddings (on the outside) */
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.trackImage {
  position: absolute;
  background: none 50% 50% / 150%;
  width: 60vh;
  height: 60vh;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow:
  0 0 0 20vh rgba(0, 0, 0, 0.2),
  0 0 0 12vh rgba(0, 0, 0, 0.2),
  0 0 0 9vh rgba(0, 0, 0, 0.3),
  0 0 0 3vh rgba(0, 0, 0, 0.4);
}
<div class="player">
  <div class="trackImageBlur" style="background-image:url('//i.sstatic.net/ItuWP.png')"></div>
  <div class="trackImage" style="background-image:url('//i.sstatic.net/ItuWP.png')"></div>
</div>

Answer №2

You might want to give this box-shadow CSS code a try - I've been using it and it's working really well for my project

box-shadow: 0 16px 32px rgba(0,0,0,0.28), 0 12px 12px rgba(0,0,0,0.24);

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

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6

HTML/CSS - Troubleshooting Animation Issues

I am currently experimenting with different website animations and implementing responsive design. However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem w ...

htmlcssresponsive-designcss-animationsresponsive

`asp:button displaying without any CSS applied`

asp:Button does not respond to CSS styling. CSS: .TabButton { border: none; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } HTML5: <asp:Button runat="server" Text="Events" CssClass ="TabButton" ...

asp.netcsshtml

Ways to stop Angular from automatically scrolling to the center of the page

I am facing an issue with my angular 11 application. Whenever I navigate to a specific page, there is an automatic scroll down which I don't want. Please refer to the attachment (gif) and homepage.html below to understand the scenario. https://i.ssta ...

javascriptcssangularbootstrap-4

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

What is the secret behind the functionality of this Jquery dark mode code?

I was experimenting with creating a dark/light mode toggle using jQuery and I came up with this solution One thing that puzzles me is when I remove the 'darkmode' class, instead of adding the 'whitemode' class, it simply adds the attri ...

javascripthtmljquerycss

Utilizing Device Detection with CSS Media Queries and Flask/Jinja

Using CSS media queries in combination with Jinja and Flask, I am attempting to identify the device type and deliver images of appropriate sizes based on this information. In this setup, requests from mobile phones are intended to receive smaller images co ...

pythoncssflaskjinja2

Initiating the bootstrap css download following the completion of page loading

It has been recommended by Google PageSpeed Insights to eliminate render-blocking CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css To achieve this, one must extract important parts from the bootstrap style rules to display above ...

cssasynchronoustwitter-bootstrap-3google-pagespeed

Difficulty with centering content and setting maximum width

Some time ago I encountered the following code: HTML: <div align="center"> </div> CSS: div{ background-image: image here; background-position: center; background-size: 100% auto; max-width: 1920px; } Recently, I found ...

htmlcss

Using AJAX to Access PHP Variables

I am working on creating a progress bar and have the following CSS code: #result{ background:#8c8f91; margin-left: 15px; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; width: ...

phpjquerycssajax

Incorporating information into an HTML webpage

Question: How can I create a dropdown menu in HTML with a list of languages (e.g. English, French) and display them based on the native language? I want to show the languages in their respective native language on the combo box (e.g. "french" displayed a ...

mysqlhtmlframeworksinternationalization

The background color of the HTML element is not displaying properly in Internet Explorer 8

Currently, I am using the <body> tag to wrap three divs on a website where all background colors are set to white. In the CSS, I have specified the background color as #fff for the html and body tags. The site displays correctly in every browser exc ...

htmlcssinternet-explorerinternet-explorer-8background-color

What causes CORS errors to occur when using http.post in Angular, but not when using traditional HTML forms?

My Eloqua account is set up to capture form submission data. Currently, I have a simple form with just one user input field. Following Eloqua's guidelines, I have successfully posted data to their server using the following code: <body> &l ...

htmlangularpost

Ensure that all of the <li> elements within a <ul> container have equal widths

I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...

htmlcss

Using the novalidate attribute in Angular 4.0.0

Since migrating to angular 4, I have encountered a peculiar issue with my template-driven form. The required attribute on the input field appears to be malfunctioning. It seems like the form has the novalidate attribute by default, preventing HTML5 validat ...

javascripthtmlformsangular

Troubleshooting an HTML Design Flaw: How to create a 3x3 table with

I have been attempting to design a HTML page with a 3x3 layout. Despite trying various methods, including divs and tables, I am having difficulty achieving equal spacing around the centered image and the other table rows. Below is an example of the layout ...

htmlcsshtml-table

Is there a way to adjust the CSS so that the video is not pushed off to the right and remains visible in the mobile view?

Whenever I view the video on this particular blog from my smaller mobile screen, it shifts to the right side and becomes invisible. You can see how it looks by clicking on this image link. I have attempted various CSS positioning methods, experimenting wi ...

javascripthtmlcss

Are iFrames being utilized for third-party applications?

I am looking to create a web application that can be extended by other developers with their own applications. Would using iFrames, similar to how Facebook does it, be the best approach? Is this considered a good practice in web development? Are there a ...

javascriptpythonhtmlruby

Implementing smooth transitions on iPad screens with responsive text

I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of ...

htmlcssipadtextcss-transitions

showing text style that is only specified on the server, not by the client

I am in the process of creating a new website that offers SMS services through clickatell. This website includes various font families that may not be defined on the client's computer. For instance, if the site is accessed from a different computer, t ...

htmlcssfont-face