Text on Hover

  • Resolved mbolsinga

    (@mbolsinga)


    8 years, 10 months ago

    I just installed Slide Anything Pro, and want to know how to get the text that shows up when you hover over the slide, like you have on your webpage with the slider that shows Taj Mahal, etc. I tried putting text in the body of the slide, but it shows up on top of the slide all of the time. I’d like to have it only show up on hover, at the bottom of the slide like in your example.

    Thanks,
    Marcia

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

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

    (@simonpedge)

    8 years, 10 months ago

    Hi, you need some custom CSS to accomplish this.
    Within each slide, enclose the text you want to display within ‘<p>’ tags – e.g.
    <p>The Sydney Opera House is a multi-venue performing arts centre in Sydney, Australia. It is one of the 20th century’s most famous and distinctive buildings.</p>

    And then use the following CSS:
    #slider_image_demo .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_image_demo .owl-item .sa_hover_container:hover p {
    background-color: rgba(0,0,0,0.5);
    color: #ffffff;
    }

    NOTE: Replace ‘#slider_image_demo’ with the CSS ID of your SA slider.

    Thread Starter mbolsinga

    (@mbolsinga)

    8 years, 10 months ago

    Thank you. That worked perfectly.

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

The topic ‘Text on Hover’ is closed to new replies.