Jump to content

Hover text for Feature slider images

Recommended Posts


Regarding the feature sliders at this url:



I need to be able to credit the artist for the images directly at the images on my website.  It seems like the cleanest way to do this is to add hover text to the images with the name of the artist.  I can't seem to figure out though how to add the hover text to the image.  Images displayed in posts and on pages use the title as hover text so that is workable.  Please advise on showing hover text for feature slider images.  Thanks!



Share this post

Link to post
Share on other sites

Hi Thessa,


I'm pretty sure you can add some text at the bottom of the slide's text.  To do this, edit a slider.  Select the Text tab above the editing area.


In there, where your text is located, at the very end, Add a space then <div class="photocredit"> the photographer's name</div>.


Then, in Custom Code, add something like:

.photocredit {color: F5F5F5;

size: 8px; }

.photocredit hover {color: 000000;}


That should work, but it won't align it over the image  -- It will be at the bottom of your text.  You can change the colors as you desire.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Thanks for the quick response Rob.  I have done what you suggested just to get an idea of what it looks like.  Kinda ruins my artistic vibe on the slider....  You can see what I mean if you look at the first slider on that link as that's where I put the example.  Yes, if that is my only option I could art it up with font/color, but it's not ideal.  Also, I'm already at the limit for text on some of the sliders, which means that the credit text wouldn't show anyway unless I make the slider bigger, and I don't want to do that...  I tried this in custom code


#feature_slider .fmedia-frame ul li a:hover span.list-title { display: block;}


but sadly my coding skills have fallen away too much to troubleshoot the details as it didn't change a thing on the feature slider presentation.


I guess given your suggestion, does that mean there is no way to add text on hover?  Thanks for your help!

Share this post

Link to post
Share on other sites

Woohoo!!  I found the solution, I'm so excited and it was easy :)  Instead of adding the image as a media item by upload on the edit feature page, I put the img html directly into the box titled "Feature Media HTML (Youtube, Flash etc...)" on the feature page.  That way I can add the title that I want to appear on hover like so:

<img src="http://www.heartbecoming.com/wp-content/uploads/2013/07/hug5.jpg" title="Artist: Candid Maurer" />



Share this post

Link to post
Share on other sites
James B

Excellent, thanks for letting us know and updating the thread.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • gabriel1937
      By gabriel1937
      After updating the site below to Framework 2.4.6, the main feature slider has changed appearance, now looking pixellated. Before it looked perfect.
      Please can you advise what I should do to make the slider look correct (should be 250px high). See attached for an indication of what is happening.
      Several other the sites we have created use PageLines Framework and I am wary of updating them to 2.4.6 if it will cause all Feature Sliders to break in this way.
      Many thanks,
      Phil Chandler
    • kellid
      By kellid
      The feature slider images are stacking vertically upon the page load on all browsers.  I found a forum topic that used the following css coding but this is not working for me.  
      #page #feature-area {
                   overflow: hidden;
        I can't take the screen capture fast enough to give a shot of it.   I'm using the newest version of WP and the url is modelalliance.org.  Any help would be appreciated!   Best,   Kelli
    • achif
      By achif
      I've tried disabling all plugins and erasing the custom code and this problem persists as you can see in the attached image ( the max. size per file is way too small by the way ).
      Please help.
    • roycreative
      By roycreative
      Ever since the last update my feature slider doesn't load correctly and the images run the length of the page. Not sure how to really trouble shoot since the problem is intermittent. 
      Screenshot here:
    • Tang
      By Tang
      Please, make the following options switchable in iBlogPro5 options:
      #feature_slider #feature-area {     background:    box-shadow;   The background should be switched off to »none« by default. That way the beautiful grey and white design with box-shadow shows up. It matches perfectly with the iBlogPro5 design, I think. And if it is switchable, you can easily come back to the regular framework design with black canvas.