Adding captions to each image on slider

  • citygenesis

    (@citygenesis)


    6 years, 3 months ago

    Hello, I would like to add captions to my SA slider (like this which I did with metaslider https://citygenesis.org/1244-2/). But it doesn’t seem to be as simple as it’s made in other sliders, where I would simply type in my caption into a box marked caption. When I did that with SA slider the captions where all over the place mixed with code. You can tell I am a moron at this so..

    All I know is how to follow directions in a plugin etc. I really like the features the SA slider plugin has so I’d rather keep it and learn how to add this simple thing of a caption than to switch to another slider plugin. So if you can give me a code and tell me where to put it, I can follow directions well. I don’t even know if I’m using the right terminology.

    Thanks for your help.
    J

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author simonpedge

    (@simonpedge)

    6 years, 3 months ago

    Have a look at the first slider on my demo site:
    https://edgewebpages.com/
    Hover of the slides and captions appear – would this work for you?

    To achieve this, have a look at this FAQ page:
    https://edgewebpages.com/faqs/
    Look under the TAB “Useful CSS Style for Slide Anything”, within the sub-heading “The Hover-Over effect used on the EdgeWebPages.com home page ‘Image Popup Demo’”

    Thread Starter citygenesis

    (@citygenesis)

    6 years, 3 months ago

    Hi, I followed the instructions, but it’s not working, so I may have done something wrong. I pasted the following into the “slider style” area in the box below “CSS #id for Slider:” and I entered the HTML into the text editor. Seemed simple enough but not working form me. What could I be doing wrong? Thanks.

    #slider_1145 .owl-item .sa_hover_container p {
    position:absolute;
    bottom:10px;
    margin:0px 10px;
    padding:5px;
    background-color:transparent;
    color:transparent;
    font-size:12px;
    line-height:16px;
    -webkit-transition:all 300ms ease-in;
    -moz-transition:all 300ms ease-in;
    -o-transition:all 300ms ease-in;
    transition:all 300ms ease-in;
    }
    #slider_1145 .owl-item .sa_hover_container:hover p {
    background-color:rgba(0,0,0,0.5);
    color:#ffffff;
    }

    Plugin Author simonpedge

    (@simonpedge)

    6 years, 3 months ago

    No, this CSS code needs to be pasted at the end of your theme’s ‘style.css’ file. You can edit this file by going to “Appearance – > Editor” within your WordPress Dashboard.

    The box you pasted this into is your CSS ID, which must be a unique ID for your slider – e.g. “slider1”.

    Thread Starter citygenesis

    (@citygenesis)

    6 years, 3 months ago

    Opps thanks for the correction. I’ve now cut and pasted it in the right place, however, it’s sill not working. Nothing changed. The hover effect did not happen. It was just plain text across the image.

    If you have any other suggestions that you think might help that would be great. If not that’s fine.

    Plugin Author simonpedge

    (@simonpedge)

    6 years, 3 months ago

    Do you have a link that I can look at?
    So I can inspect the CSS to see if I can suggest a correction.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Adding captions to each image on slider’ is closed to new replies.