Creating a transparent image with only CSS and HTML

Question

Is it possible to create this image by CSS/HTML only, without JavaScript? Because the content is dynamic and the image is transparent.

Answer 1

Yes you can stack several images on top of each other to create what you have posted using HTML & CSS.

To get the opacity effect use

.opacity40 {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Answer 2

You have split your image into layers:

1. The colorful background
2. The white layer with a transparent circle
3. The eye and other icons to put inside the circle

It could look something like this:

HTML:

<div class="colorful-box">
    <div class="box-with-circle">
        <span class="eye icon"/>Lorem Ipsum With eye
    </div>
</div>

<div class="colorful-box">
    <div class="box-with-circle">
        <span class="ear icon"/>Lorem Ipsum an ear instead
    </div>
</div>

CSS:

.colorful-box{
    background: url(link-to-the-colorfull-background.jpg);
    width: 400px;
    height: 100px;
    float: left;
}

.box-with-circle{
    background: url(white-box-with-transparent-circle.png);
    margin: 10px;
    width: 380px;
    height: 80px;
    float: left;
}

.icon{
    width: 80px;
    height: 80px;
    float: left;
    position: realtive;
    top: 80px; /*Make it fit inside circle*/
    left: 80px; /*Make it fit inside circle*/
}

.eye{
    background: url(transparent-eye.png);
}

.eye{
    background: url(transparent-ear.png);
}

Answer 3

Whenever you need to load the content dynamically, you must use javascript to get access to that content. In your case if image is static it can be done with css and html, and for content to load you must use javascript.

filter: alpha(opacity = 0.001);/* for ie */

opacity: 0.001;