Float image link over Nivo Slider

HTML & CSS
1

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 [url=http://david-mitchell.ca/election/]David Mitchell. How’d he do that :slight_smile: 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

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

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, [url=http://david-mitchell.ca/election/]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 :slight_smile: into the html caption area and you can see that opacity around it which I’m trying to remove.

4

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.


.nivo-caption {
 [B] background:transparent;[/B]
  bottom: 0;
  color: #FFFFFF;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 8;
[B] opacity:1.0!important[/B]
}
5

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

Glad you got it sorted :slight_smile: