Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 4, 2015 at 12:59 am #529689
    LifeIsNow001

    Hi,
    Re Accordion Slider
    I would really like there to be a Title always showing in the top left of each slide with just a little darkened background behind it (not like now where it takes up the while picture.)
    Then when you mouse over the slide it slides out normally (active), then I need the text to appear under the Title with only a dark background behind the actual text, not the whole slide. I have a lot of text so i just need it to appear on activation.

    I can’t seem to find all the classes and ID’s to achieve this.

    Thanks

    November 4, 2015 at 4:07 pm #530136
    Elliott

    Hi LifeIsNow001!

    Your using the LayerSlider it looks like. For each layer you add click on the “Styles” tab and you can position it wherever you need.

    Cheers!
    Elliott

    November 4, 2015 at 8:38 pm #530395
    LifeIsNow001

    Actually if you scroll down a bit you will see row called “Our Cornerstones” and an accordion slider underneath it. It has 3 puzzle piece pictures on it. That’s the one I would like to always show the Title, and only the content text on mouse over.

    November 5, 2015 at 10:13 am #530634
    Ismael

    Hi!

    Not sure if this is what you’re looking but try to add this in the Quick CSS field:

    #top .aviaccordion-title-on-hover .aviaccordion-preview {
    opacity: 1;
    filter: alpha(opacity=100);
    text-align: center;
}

#top .aviaccordion-preview-title-wrap {
    background: transparent;
}

#top .aviaccordion-title {
    position: absolute;
    left: 0;
    background: rgba(0,0,0,.8);
    padding: 20px;
    top: 0;
    margin: 0;
    text-align: left;
}

#top .aviaccordion-preview-title {
    display: block;
    padding: 0;
}

#top .aviaccordion-slide:hover .aviaccordion-excerpt {
    opacity: 1;
}

#top .aviaccordion-excerpt {
    opacity: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    padding: 10%;
}

#top .aviaccordion-slide:hover .aviaccordion-preview {
    background: rgba(0,0,0,.5);
}

#top .aviaccordion-preview-title-wrap {
    display: block;
}

    Cheers!
    Ismael

    November 5, 2015 at 6:32 pm #531074
    LifeIsNow001

    That’s just about perfect I was able to edit the CSS for everything except there seems to be a darkness over the whole picture when its just sitting idle. Its OK for that to come on on HOVER, but when its idle it would be nice to see the picture normally. And on hover it would be best if the darkness just goes behind the text not the whole slider.

    Thanks

    November 7, 2015 at 8:54 am #531811
    Ismael

    Hey!

    Add this below the css codes:

    #top .aviaccordion-preview-title-wrap {
    background: transparent;
}

    Replace this line:

    #top .aviaccordion-slide:hover .aviaccordion-preview {
    background: rgba(0,0,0,.5);
}

    ..with this:

    #top .aviaccordion-slide:hover .aviaccordion-excerpt {
    background: rgba(0,0,0,.5);
    padding: 20px;
    display: block;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

    Regards,
    Ismael

    November 12, 2015 at 11:33 pm #535133
    LifeIsNow001

    Thank you that worked great, I had to make a few little tweaks but its good now. Here’s the code if anyone else wants it:

    /* =========== Accordion slider customization for text ================ */

    #top .aviaccordion-title-on-hover .aviaccordion-preview {
    opacity: 1;
    filter: alpha(opacity=100);
    text-align: center;
    }

    h3.aviaccordion-title {
    position: absolute;
    left: 0;
    background: rgba(0,0,0,.3);
    padding: 10px;
    top: 0;
    margin: 0;
    text-align: left;
    }

    #top .aviaccordion-preview-title {
    display: block;
    padding: 0;
    }

    li.aviaccordion-slide:hover .aviaccordion-excerpt {
    opacity: 1;
    }

    .aviaccordion-excerpt {
    opacity: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    padding: 10%;
    }

    #top .aviaccordion-slide:hover .aviaccordion-excerpt {
    background: rgba(0,0,0,.6);
    padding: 20px;
    display: block;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    }

    #top .aviaccordion-preview-title-wrap {
    display: block;
    }

    #top .aviaccordion-preview-title-wrap {
    background: transparent !important;
    }

    November 14, 2015 at 11:23 am #535825
    Ismael

    Hi!

    Great! Thanks for sharing. Let us know if you need anything else. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘enfold accordian slider title always visible on left, text visible on mouseover’ is closed to new replies.