WordPress.org

Ready to get started?Download WordPress

Forums

Question regarding image overlay text (1 post)

  1. scotchward
    Member
    Posted 2 years ago #

    I was wondering if anybody could help me with something I am trying to do for my blog. I use a theme (Autofocus Pro), which has a shortcode style for images "largeimage". I like using it for images on my site but the only problem is when the image has a lot of white, the description (being in white text) is hard to read. I wondered if anyone could tell me how I might either:

    a) Add a black outline to the white text to make it stand out on a white background (I tried to do this with the CSS 3 code 'text-outline' in the stylesheet, but I couldn't make it work).
    b) Have the largeimage shorcode give the image a dark overlay with an opacity of say 50% in order to make the text visible.
    c) Create a new shortcode with black description text for predominately white images.

    I am quite new to this stuff, so I am sorry if what I am asking is dead simple!

    For an example of my problem, please see the picture of the rusty house after the text on this post:

    http://danielberesford.com/2011/05/17/naoshima-the-art-island/

    The overlay description is meant to read "Art house" but the text isn't visible against the overcast sky.

    Here is the theme's code for the largeimage shortcode:

    #content .entry-content .large-image {padding:0;position:relative;margin-bottom:0;display:block;clear:both;float:none;}
    #content .entry-content .large-image p {position:absolute;padding:22px;width:348px;top:0;left:0;font-size:24px;font-style:italic;line-height:33px;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
    #content .entry-content .large-image img {margin:0 0 0px;max-width:800px;}

Topic Closed

This topic has been closed to new replies.

About this Topic