Best Way To Code This Element?

  • I’d like to end up with this effect:

    View post on imgur.com

    The gray is a placeholder which will eventually be the Post featured image/thumbnail. I want this image to fade to white, which is the background color for the excerpt container.

    I don’t want to edit every image and manually place a gradient on it, but I don’t know how to put a gradient on top of an image through html/css.

    So I’m hoping there’s another way and someone here can give me some advice!

Viewing 1 replies (of 1 total)

  • The easiest (well, as easy as possible..) way to do it is something like this…

    HTML:

    <div class="covered_image">
    <div class="cover"></div>
    <img src="image.jpg" width="160" height="160" />
</div>

    CSS:

    .covered_image {
    width: 160px;
    height: 160px;
    position: relative;
}
.covered_image .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    background: url("cover.png" top left no-repeat);
    z-index: 2;
}
.covered_image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    z-index: 1;
}

    The only real note here is that you’d need to use a transparent PNG file (perferred) or GIF (not so great) in order for the background image ot show through.

Viewing 1 replies (of 1 total)
  • The topic ‘Best Way To Code This Element?’ is closed to new replies.