Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
fade edges of images using CSS
Avatar
Jan Scott Nelson
Jedi
Members
Forum Posts: 95
Member Since:
January 26, 2013
sp_UserOfflineSmall Offline
1
September 3, 2014 - 3:17 am
sp_Permalink sp_Print

I wonder if anyone knows if this is possible. My research so far seems to indicate that it isn't. My client would like images to fade around the outside by just 20px or so so they are softer against the background - I can obviously achieve this using Photoshop or equivalent, but just wanted to check if anyone knew of a css way forward!

Many thanks

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1441
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
2
September 3, 2014 - 7:20 am
sp_Permalink sp_Print

You could try box-shadow.

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 5.1.1 – Thesis 2.8.5 - Focus

 

*** Biggest cause of problems is now the cache, whether it is a plugin, the browser or your host's server. ***
*** Do not edit Skin and Editor CSS - make changes using Custom CSS. ***
*** Do not edit core files - make changes using custom.php or master.php. ***
Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
3
September 3, 2014 - 11:12 am
sp_Permalink sp_Print

That would be pretty tricky.  

You could try using absolute positioning to place a div on top of the image that had a white to transparent radial gradient.  Or perhaps a div over the image with a white box shadow.

Or you could overlay a semi transparent image over the top of the image.

Here is another idea - http://stackoverflow.com/quest.....ge-via-css

Avatar
Jan Scott Nelson
Jedi
Members
Forum Posts: 95
Member Since:
January 26, 2013
sp_UserOfflineSmall Offline
4
September 3, 2014 - 11:18 am
sp_Permalink sp_Print

Thank you, both, very much. Lots of things to try out :)

I knew I could rely on this forum!

J

Avatar
Keith W Jones
Somerset, UK
Member
Members

Community Member
Forum Posts: 1441
Member Since:
June 22, 2013
sp_UserOfflineSmall Offline
5
September 3, 2014 - 12:02 pm
sp_Permalink sp_Print

Photoshop could well be the easiest option.

Keith

Keith W Jones
Make sure you backup before upgrading and making changes.
Best results when one question per thread, link to site, version of WP, Thesis and skin.
http://www.kwjassociates.co.uk - Wordpress 5.1.1 – Thesis 2.8.5 - Focus

 

*** Biggest cause of problems is now the cache, whether it is a plugin, the browser or your host's server. ***
*** Do not edit Skin and Editor CSS - make changes using Custom CSS. ***
*** Do not edit core files - make changes using custom.php or master.php. ***
Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
11 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1441

Brian Tozer: 1004

Carolin: 984

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

soundpilot

digitalaerolus

emma62755

sharonmarks

emma80233

Tijs de Jong

Forum Stats:

Groups: 8

Forums: 46

Topics: 7003

Posts: 34845

 

Member Stats:

Guest Posters: 6

Members: 6763

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent