Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Fade image edges with CSS

Posted on 2013-11-13
7
1,432 Views
Last Modified: 2013-11-18
Is there anyway to fade or feather the edges of an image using CSS?  All I find is drop shadow options or using an image overlay which I don't really want to do.  I found 'inset', but it doesn't work in Chrome (or at least the version I'm using.)  I want it to automatically apply as my client will be updating their site, so they won't have the ability to 'create' images that fade out on the edges.  

I've searched, but everything I find is REALLY old, so I'm hoping there's some new option out there.  Please let me know.  Thanks.
0
Comment
Question by:StellaBob
  • 3
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 39645835
There is nothing you can do directly to the images.  You need graphics software to do it.  You might be able to do something during generation with PHP and GD:
http://php.net/manual/en/book.image.php

But I don't know that I have the graphics skills necessary to figure out how such a solution would need to be done.

If the images are background images, it might be possible to do something with radial-gradients and transparency on a overlay background, but you will probably run into cross-browser issues even if you get something acceptable that way.

Cd&
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 250 total points
ID: 39646778
you could always just apply the brute force approach, and place a transparent image on top of the dynamically generated ones, with absolute positioning. But personally, I don't think it's worth it.

The PHP solution would be interesting.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648098
Absolute position might work but then puts the page on the road to maintenance issues, esspecially in this day of responsive pages and support for a huge range of devices.

logically it should be done in a graphics program, but if the if the client cannot manage the graphics, then you either need to teach them or show them an alternative that does not require skills they don't have.

Cd&
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39648502
A version of what I'm suggesting could be done via PHP server side. See the very last comment on this page:

http://www.php.net/manual/en/function.imagealphablending.php

I think it has potential.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39648515
actually, just applying the concept of watermarking could work quite nicely. I'm sure there's lots of resources you can find on how to do that in PHP. The 'watermark' in your case is just the overlay that has the fuzzy edges.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648541
The alpha blend still needs GD, but it looks promising, and a fuzzy edge watermark could probably be applied by blending.  

I think trying to use an overlay instead of blending could be a problem down the road, because it assumes that the images are all the same size.  Using GD would would allow for the image size to be variable.

Cd&
0
 

Author Closing Comment

by:StellaBob
ID: 39656853
I'm surprised with all the advances in CSS that they haven't figured this out, but I appreciate your recommendations.  Thanks.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question