I'd like to create an effect in a site I’m building where an image is masked by an overlay. The overlay should create a “fade out” effect — I don’t actually want anything animated, but the overlay should make the image look as if it’s fading to the background colour at the edges.

Something like this: .png

I prefer to do this with CSS/HTML/JS - not images. Any thoughts on where to start? Thanks.

I'd like to create an effect in a site I’m building where an image is masked by an overlay. The overlay should create a “fade out” effect — I don’t actually want anything animated, but the overlay should make the image look as if it’s fading to the background colour at the edges.

Something like this: https://i.sstatic.net/ZTKTa.png

I prefer to do this with CSS/HTML/JS - not images. Any thoughts on where to start? Thanks.

• javascript
• html
• css
• fade
• masking

5 Answers 5

you could do something like this for example : Example

html

<div class="photo_container">
        <div class="photo">
<img src="/lakenwoods/images/mockup-photo.png" width="540" height="463" /></div>
        <div class="overlay">
            <div class="content">
                <h1>Welcome to Lake-N-Woods Realty</h1>
                <p>
                We are a Diverse and Highly Effective Real Estate Company, Dedicated to Satisfying all of our Clients Needs. We Specialize in Recreational, Rural and Investment Property throughout Bemidji and North Central Minnesota.
                </p>
                </div>
        </div>
        <div class="clear">
       </div>
   </div>

CSS

@charset "utf-8";
/* CSS Document */

.clear {
    clear:both;     
}

.photo_container {
    position: relative;
    width: 540px;
    height: 463px;
    overflow:hidden;
    margin: 0; padding:0;
}

.photo_container .photo {
    z-index:1;

}


.photo_container .overlay {
    width: 540px;
    height: 463px;
    background: url(/lakenwoods/images/mockup-overlay.png) no-repeat top center;
    position:absolute;
    bottom: 0;
    left: 0;
    z-index:10;

}

.photo_container .overlay .content h1 {

    position:absolute;
    top: 310px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:18px;
    color: #fff;
    font-weight: 700;
    width: 315px;

}


.photo_container .overlay .content p {


    position:absolute;
    top: 335px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:12px;
    color: #fff;
    width: 315px;
    line-height: 1.4em; 

}

Ah — based on your comment on antyrat’s answer, your best bet is to create a PNG image that contains the effect (i.e. a semi-transparent white shape), and position it over the top of your actual image using CSS (position:absolute and z-index will be involved).

You can’t currently create non-square shapes using HTML and CSS alone.

I know that you are asking specifically for a CSS/JavaScript solution, and I'm sure you have your reasons.

Nevertheless, I just wanted to throw out the simple solution of a single faded image file like you already posted in your question with no fancy programmed effects.

Start with jQuery. For example see fadeIn function.

For static alpha mask over image use opacity css property:

.myimage {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

The jQuery animate function (with opacity) should/may be able to handle that, though antyrat's answer should work as well if you simply fadein the overlay.