Achieve a stunning image glow effect using only CSS

I have been able to create a stunning image glow effect by duplicating the image in HTML and applying CSS filters like blur and saturation. However, I am wondering if it's possible to achieve the same result without adding the additional HTML element for the blurred/saturated image, as it is essentially just a styling choice on the main image. Take a look at the example below to see this effect in action.

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

body {
  display: flex;
  justify-content: center;
  background-color: black;
  color: white;
  padding: 2rem;
}

.wrapper {
  position: relative;
  width: 250px;
  height: 250px;
}

.glow,
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 10px;
 }

.glow {
  filter: blur(30px) saturate(5);
}
<div class="wrapper">
  <img class="glow" src="https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg" />
  <img class="image" src="https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg" />
</div>

htmlcssimagecss-filters

Answer №1

Successfully implemented a CSS-only image glow effect using a pseudo element (credit to CBroe!) Here is the updated solution without the need for an extra HTML img tag:

body {
  display: flex;
  justify-content: center;
  background-color: black;
  padding: 2rem;
}

.wrapper {
  position: relative;
  width: 250px;
  height: 250px;
}

.image,
.wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
 }

.wrapper::before {
  content: "";
  background-image: url("https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg");
  background-size: cover;
  filter: blur(30px) saturate(5);
}
<div class="wrapper">
  <img class="image" src="https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg" />
</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

Utilizing CSS for showcasing XSTL table

I've hit a roadblock with my initial XML project and I need some help. My goal is to create an address book using an XML file containing contact data, which is then transformed in XSLT. While both the XML and XSLT files function correctly, I encounter ...

cssxmlxslt

What is the best way to position the publication date of an article at the bottom of the

I am looking to have the article publishing date (1/9/2016) positioned at the bottom inside the container. Right now, the date appears just below the text, but I want it to be aligned at the bottom of the container. The website in question is watchathletic ...

htmlcss

AngularJS - Dynamically change the placeholder value

<md-input-container class="md-block hide-error-space" flex="25"> <input required name="password" ng-model="password"> </md-input-container> Here is a form field where the user can enter their password. <md-input-container md-no-float ...

htmlangularjs

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear. I've been looking up examples of jqu ...

jqueryhtmlruby-on-railscss

Using JQuery to implement custom validation on a text field is an effective way

How can I validate a text field using Regex and create my own validation rule for starting with "com."? Can you provide me with an example of how to do this? I want the text field to only accept values that start with com. <input id="appPackage" name=" ...

javascriptjqueryhtml

Switching background image once the form is validated

Currently, I am in the process of developing a form for a website using HTML, CSS, and Angular JS. Although I have successfully achieved my desired outcome, I can't help but think that there might be a more efficient way to approach it. With that in m ...

javascripthtmlcssangularjs

Upon clicking the "show more information" button on the page, JavaScript executes the function to display additional details

<a href="#" class="button">Read More</a><br> I'm currently struggling with programming a button on my website. Specifically, I need the Read More button to display all information related to the CDs I have for sale when clicked. A ...

javascripthtml

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

htmlcss

How can I utilize a Vuex store to establish a default image?

I'm trying to set a default image for the user in vuex by configuring my vuex store like this state:{ default_image: "../assets/images/users/1.jpg" }, getters:{ Image:state=>state.default_image, } Next, I have the App.vue file <templ ...

imagevue.jsvuex

Can a second background color be layered on top of an existing one?

Recently, I delved into the world of HTML & CSS, and even though my learning journey has just begun a week ago, I am already working on a project. One question that's been bugging me is whether it is possible to overlay one background color on top of ...

htmlcss

Incorporate dynamic classes into an HTML list using PHP

I'm struggling to assign consecutive classes to each list item in a list with the 'nav' class. My goal is to give each list item a class of 'nthChild-x', where x corresponds to its position in the list. I'm pretty new to PHP, ...

phphtmldomhtml-lists

Having trouble with Google Font Api not showing up on the server, but it works fine

I'm attempting to incorporate a Google Font into my website. I have included the font in the head section of my html code like so: <link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel="stylesheet" type="text/css"& ...

htmlcssfonts

Which technology is utilized to ensure a webpage updates instantaneously?

I am looking to create a webpage where a user can enter the title of a book they have read. The changes should be instantly reflected on a list that displays all the books they have added to the database, without requiring the user to manually refresh the ...

phphtmlajax

Attempting to establish a login system using MongoDB

I am currently working on a function to verify user login details entered in a form and compare them with data stored in MongoDB, such as email and password. However, the function seems to be malfunctioning. The expected behavior is that when a user ente ...

javascripthtmlvue.jsauthentication

Arranging data in an HTML table by dynamically populating it with information retrieved from a server

UPDATE 4/16/2012: All issues have been resolved, and the sorting functions are now functioning correctly. Timezones have been converted to their corresponding one-letter UTC codes (A-Z). The only remaining task is implementing Daylight Savings Time checks ...

javascripthtmlsortingknockout.js

selenium.common.exceptions.ElementNotInteractableException: Error: the element cannot be interacted with

My current programming project involves using selenium webdriver with Twitter for fun, but I've run into a frustrating issue. The problem arises when I attempt to input text into the tweet box: https://i.stack.imgur.com/Zxwvg.png To activate the ele ...

htmlpython-3.xselenium-webdriverpython-3.6

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

javascripthtmlcsscanvas

The year slider on d3 showcases the specific regions between each incremental step

I am working on creating a step slider in d3 (v5) that spans from the years 2000 to 2021 using the d3-simple-slider plugin. const slider = sliderBottom() .min(new Date(2000, 1, 1)) .max(new Date(2020, 1, 1)) .tickFormat(d3.timeFormat(& ...

javascripthtmld3.jsvisualization

Aligning Bootstrap 4 Images and Spans

My goal involves two tasks: 1 - CENTER a Span within an Img; 2 - ALIGN the Span to the right of the main div This is what I currently have -> https://i.sstatic.net/Yln15.png The existing code is as follows: <div class="row" style="text-align: righ ...

cssbootstrap-4

Concentrate on the disappeared div element following the AJAX request

Encountering an unusual issue here that has me a bit puzzled. In one of my DIV elements, I have included several links which trigger an AJAX call (using jQuery) upon being clicked. The server (Controller) then responds with HTML content, specifically a JS ...

javascriptjqueryhtmlajaxspring-mvc