Home/ Questions/Q 6736277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:06:40+00:00

I am creating an image effect where the text at the bottom of a

  • 0

I am creating an image effect where the text at the bottom of a paragraph fades away
This is the effect I’m trying to achieve:
enter image description here
I have some working HTML & CSS which achieves this look but I am looking to see if there is a better way to achieve this effect? I’ve often found that there are HTML tricks to do what I want that I dont know of.

I’m open to using JQuery if it has the ability to do this effect but a native HTML CSS effect would be best. Plus is my solution cross browser?

<html>
<head>
    <title> </title>

    <style type="text/css">
    <!--
        body { 
            background-color: blue;
            text-align: center;
            margin: 0 auto;
            padding: 0 auto;
        }

        #mainContent {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            padding: 0 auto;
        }

        .textContainer {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            padding: 0 auto;
            position: relative;
        }

        .recipeContentOverlay {
            z-index: 5;
            position: absolute;
            left: 0;
            top: 80px;
        }
    -->
    </style>
</head>
<body>

    <div id="mainContent">
        <div class="textContainer">
            <h2 class="recipeText">Ingredients:</h2>
            <p class="recipeText">Have you ever had broccoli rabe (pronounced "rahb" or "rah-bee" depending on where you are from)? I have sort of a love hate relationship with it. It looks like broccoli, but it doesn't taste like it. Broccoli rabe can sometimes be so bitter, even with blanching, there's no amount of vinegar or bacon that can save it. But bitterness heightens flavors</p>

            <img class="recipeContentOverlay" src="images/overlay.png" width="100%" height="200px"/>
            <!-- The idea is to get the above image to sit slightly over the top of the above "p" element so that some of the text 
                 fades away. Is there a better way to acheive the same look/effect? -->
        </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try something like this. Basically we use CSS gradients and opacity to set the color.

    http://jsfiddle.net/V45LW/

    You can use a site like this one to help with getting the css written. Basically what you do is absolutely position a div at end of paragraph of fixed height. We apply a gradient opacity change to it.

    div.fade {
    position: absolute; 
    bottom: 0;
    height: 45px;
    width: 100%;
    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */


}
    • 0