SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float image link over Nivo Slider

    Hi,

    I'm trying to overlay an image over various slides in Nivo Slider -- you know, the typical "learn more..." image link over the slide that appears with the slide and then fades with the slide. I can force an image into the html caption area, as I mentioned in a post at the Dev7 forum (see -- HELP: how to float an image over a slide? - Dev7studios Support Forum), but the opacity is a problem. If I turn down the opacity of the html caption area, the "learn more..." image also fades.

    When researching this, I came across this post here (about something totally different, but) where someone has managed to remove opacity from the html caption area but retain content visibility, at his site David Mitchell. How'd he do that I think that might sort out my problem. If he has text showing without opacity and I can force an image there, it would probably float on the slide as I'd like.

    Would appreciate your thoughts.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Do you have a link to the page in question as we need to see what structure you have as well as have something to test ideas out on?

    Opacity applies to an element and all its children and can't be turned off for child elements.

    What you'd need to do is take the element out of the parent that has opacity applied and then absolutely place it back into position. As it is no longer a child it will not have any opacity. You would just need ot ensure that a grandparent has a stacking context applied instead (position:relative) to maintain the correct position

    You can see the reverse technique in action here where the opacity is applied underneath the content in its own context.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Paul. Thanks a lot. Unfortunately, I don't have anything up for this. I've been testing the script local. What I can do which I hope might help is give you this link -- Nivo Slider Demos. As you can see there under the "with captions & links" demo, the caption has a certain opacity. If you take a look at this site though, David Mitchell, the designer concerned, using the same script, has somehow removed opacity and still kept the html content visible over the slide.

    I hope that might help, otherwise I can throw something up on a free hosting site. Here's also a screencap of what I'm trying to do where I've put a familiar image into the html caption area and you can see that opacity around it which I'm trying to remove.
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    In the site you linked to the text is still at 80% opacity. All that has changed is that there is no background colour behind the text. Is that what you want to do - i.e. just remove the background colour?

    e.g.
    Code:
    .nivo-caption {
      background:transparent;
      bottom: 0;
      color: #FFFFFF;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 8;
     opacity:1.0!important
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, seriously, nice one. That worked. The '!important' wouldn't override the js, but once I changed that and put the other styles from your post in the right css (there's two), it worked a charm. The image link floats on the slide now without opacity. Complete win. Sincere thanks, Paul. Good stuff.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Glad you got it sorted


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •