Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
How to use CSS3 image overlay effect
This article explains how to use the image overlay effect in CSS3.
We will add an image to the web page, where the image is in the background with border. In addition the image has a container below the image. Transpacency is added to it as a "see through" and in a form of a container to the image.
<img> tag is used and the for styling to make the block (positioning relatively to the bottom of the container.
Browser compatibility: Chrome, FF, IE9 at least.
border: 10px solid #ccc;
font:1em Georgia, serif;
Gray border gives the necessary effect in this case, no other settings are required. The inner black container will be styled. For the span element we will apply some styline too. Specific positioning of the span will be made with the absolute setting. In resolution to the parent with set releatively (position: relative;) this will make the alignment correct now.
For this example an image of size 200x200 pixels is used. The div container is created as class and named as pic-box. If the image is not displayable then the alt shows the text instead. You can use something else for span, but in this example we will use it.
The 0.75 opacity will give the transparency we need. Opacity applies for the span element and anything within it. So we will remove the opacity and use rgba (alpha) instead. This singles out the colors.
With all the styling, you can do your own lodifications and see the changes.
There are adjustment needs when using IE 7,8 versions, but in Chrome and FF this should work just fine.