- CSS: Placing text over an inline image
- Using a TABLE to overlay text on an image
- Using CSS to overlay text on an image
- Separating styles from content
- Showing text over an image on hover
- Source code for this example:
- References
- How to Create an Image with Transparent Text with CSS
- How to create an image with transparent text
- Example of creating an image with transparent text:
- Result
- Example of adding a text on the background image:
- How to position a text over an image
- Example of positioning the text over an image:
- How to add text blocks over an image
- Example of adding a dark text block over an image:
- Example of adding dark and light text blocks over an image:
- How to add blur effect to the text block
- Example of adding a blur effect (4px) to the text block:
- Example of adding a blur effect (9px) to the text block:
CSS: Placing text over an inline image
CSS is a very powerful tool that works best when kept as simple as possible. Unfortunately there are a lot of WYSIWYG applications and other HTML editors that produce CSS that is anything but simple.
A common request is to be able to display HTML text over an image that’s already embedded on the page. There are a number of valid solutions using either tables or CSS.
Using a TABLE to overlay text on an image
The HTML solution has been possible since Netscape 3 and is fairly simple to implement, but not so flexible as more recent options.
| (text to appear over the image goes here) |
| The HTML approach is to set up a TABLE with a background image. Then a single TD is used to display the text. The width and height of the TABLE are set to match that of the background image. This is a valid approach according to HTML standards, but not so good if you look at the resulting code. Why should you have to use a TABLE to handle this kind of layout? Perhaps CSS has a cleaner solution. Many years ago this was a novel approach, but these days it’s very much discouraged. Using CSS to overlay text on an imageIndeed there is a simpler, more flexible solution. Instead of a TABLE we use a DIV and CSS positional attributes to place futher text and images with relation to that DIV. As you can see, we are able to place any number of sub-elements within the surrounding div. In this case a div containing paragraphs with text (bottom left), and a paragraph by itself (top right). The CSS approach is to use one DIV to define the area where the background image appears. This DIV has it’s position attribute set to relative in order that the items it contains can be properly placed. This is done by setting the position attribute of contained items to absolute and placing them by setting one or more of the positional attributes: top, right, bottom and left. This block has been positioned at the top, right The position attribute may seem complicated at first, but it’s the key to implementing complicated layouts without excessive amounts of code. Remember that you need to have a container element with position: relative in order to place inner elements using position: absolute. Without a container element all positioning will be in relation to the viewport (the corner of the screen). This in combination with position: fixed can create elements that stay in one corner of the screen and don’t move when the page scrolls, but only in browsers other than Explorer. On this site you might see a [top] link doing just that if you’re using a compatible browser. Separating styles from contentNormally you will want to have your CSS in a separate file or at least it’s own style block rather than inline with the HTML. This can be easily achieved by assigning CSS classes to the various container elements: The result is idential to the previous example, but now much easier to maintain as the HTML and CSS can be edited independently. Showing text over an image on hoverSometimes you only want text to appear when the mouse is over the image or the image has focus. One nice way of achieving this is to wrap the image in a link and use the title attribute to store the caption. In the example below you can see this in action. We’ve set the outer link to position: relative and used its title attribute attr(title) to create some generated content and place it over the image. The generated content is initially hidden opacity: 0 and then exposed using the hover/focus state and a CSS animation fader.
The slow fade may still not work in some browsers as they don’t support transition effects on generated content. It does fade in in Firefox 23.0. The attr method in CSS is extremely useful as it allows you to embed data into HTML elements for use in generated content. In this case we’re using the title attribute, but you can also create your own custom attributes. In that case the custom is to name them data-* (e.g. data-hovertext). Source code for this example:You could also place HTML text over the images as in the earlier examples and have it show/hide the same way, but that’s not nearly as cool. ReferencesHow to Create an Image with Transparent Text with CSSIn this snippet, learn about the methods used to overlay text on images. For an ideal combination, the image should be dark, and the text light. How to create an image with transparent textThis is not so difficult as it seems. It is quite simple, and you can achieve your desired result by using only CSS. For having a simple, transparent text on an image, you need to have your image or background image in a element, and the content block in another . Then, use the CSS opacity property to set a transparent image or text. The opacity property is used to adjust the transparency of a text or photo. The value of opacity can be between 0.0 to 1.0, where the low value demonstrates high transparency and the high value shows low transparency. The amount of the opacity is counted as Opacity% = Opacity * 100. Or instead of the opacity property, you can just set an RGBA color value. See an example in action. Example of creating an image with transparent text:Result
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Let’s see another example where the text is set on a background image which fills the entire screen. Example of adding a text on the background image:How to position a text over an imageTo position the text over an image and define its place on the image, you need to apply the CSS position property set to its «absolute» value for the text blocks and the «relative» value for the parent element. Then, use the CSS top, bottom left, and right properties to define the position of an element in combination with the position property. And for centering the text block, apply the transform property like this: transform: translate(-50%, -50%) . Example of positioning the text over an image:How to add text blocks over an imageHere, let’s see how to create text in a box over images. In a reliable and straightforward way, a transparent text block can be added to an image. Whip up on some white text a slightly transparent black rectangle. If the overlay is sufficiently opaque, you can have almost any image below, and the text will still be completely readable. As we have already learned how to make and position text blocks over an image above, now we need to use the CSS background property to add a background style and color to our text block. Example of adding a dark text block over an image:Here, see another example with dark and light text blocks. Example of adding dark and light text blocks over an image:How to add blur effect to the text blockThe blurring part of the underlying image is an amazingly great way to make an overlaid text easy to read. For having a blur effect, you need to set the filter property with the «blur» value ( filter: blur ) for your text block. Example of adding a blur effect (4px) to the text block:You can add the blur effect more to make your text easier to read. Example of adding a blur effect (9px) to the text block: |
