Overlay in the image

  • Resolved Dinamicore

    (@dinamicore)


    10 years, 5 months ago

    Hello Forum support:

    I am using template 2 to setup a scroller in this Website http://anagabrielasalvador.com/web/

    I need the Title and description to display at all times; so I used the code below.

    As the overlay is tied to the title and description, I had to use the code display: none; but can´t make the overlay display on hover.

    Please advice.

    Thanks

    .advps-slide a:hover {
    background-color: red !important;
    }
    .advps-overlay-one {
    display: none;
    }
    .advps-overlay-one a:hover {
    display: block;
    }
    .advps-excerpt-one a:hover {
    display: block !important;
    background-color: red !important;
    }

    https://wordpress.org/plugins/advanced-post-slider/

    [Moderator Note: No bumping, thank you.]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Dinamicore

    (@dinamicore)

    10 years, 5 months ago

    Sorry moderator; I didn´t know about the Forum rule to “to keep your code enclosed in backticks”.

    Not in any way, I was trying to bump my post.

    Just looking for help.

    I rephrase the question.

    I am using template 2 to setup a scroller in this Websitehttp://anagabrielasalvador.com/web/
    I need the Title and description to display at all times, and to extend the hover to the entire element (single slide).
    PLEASE TAKE NOTE I deleted the above css code to make thins simpler.
    Please advice

    Thread Starter Dinamicore

    (@dinamicore)

    10 years, 5 months ago

    Just to contribute; I answered my own question; the code I used, below:

    (
    .advps-excerpt-block-one {
    opacity: 1;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    background: transparent;
    cursor: default;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
    opacity: 0;
    padding: 0px !important;
    }
    .advps-excerpt-block-one:hover {
    opacity: .6 !important;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
    background: red;
    height: 100%;
    width: 100%;
    color: white !important;
    }

    )

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

The topic ‘Overlay in the image’ is closed to new replies.