Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 3, 2016 at 12:05 am #667878
    sparkzilla

    Currently when I hover over the image the caption fades in. I would like the caption to slide in from the bottom of the image, similar to the images on this page: http://www.dca-design.com/

    August 3, 2016 at 2:11 pm #668032
    Yigit

    Hi sparkzilla!

    Can you please post the link to your page where we can see the element you would like to customize?

    Regards,
    Yigit

    August 3, 2016 at 2:28 pm #668050
    sparkzilla

    Hi, please chedk the two images at the bottom of this page: http://dci2.newslines.org/

    August 3, 2016 at 2:39 pm #668055
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay {
  animation: 1s slide-up;
}
@keyframes slide-up {
  from {
    margin-top: 200px;
  }
  to {
    margin-top: 0;
  }
}

    Best regards,
    Yigit

    August 3, 2016 at 3:11 pm #668079
    sparkzilla

    Hi that’s getting there, but I’d like the caption to be around 50 pixels high and ease in from the bottom of the image, similar to the images here: http://www.dca-design.com/

    Thank you for your help!

    August 3, 2016 at 3:34 pm #668086
    Yigit

    Hey!

    Please create a temporary admin login and post it here privately.

    Regards,
    Yigit

    August 3, 2016 at 5:19 pm #668179
    sparkzilla

    Enclosed

    August 4, 2016 at 12:40 pm #668541
    Yigit

    Hi,

    I added following code to Quick CSS as well

    .av-caption-image-overlay-bg {
    height: 50px;
    bottom: 0;
}
.av-image-caption-overlay-center {
    vertical-align: bottom;
    position: relative; 
    bottom: 10px; 
}

    Please review your website now

    Best regards,
    Yigit

    May 10, 2017 at 2:34 pm #791108
    solidvapor

    If you don’t want the caption to begin sliding from below the image, you can use…

    .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay {
    animation: 1s slide-down;
    }
    @keyframes slide-down {
    0% {
    opacity: 0;
    height: 0%;
    }
    100% {
    opacity: 1;
    height: 100%;
    }
    }

    …to have the caption slide down from the top of the image or…

    .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay {
    animation: 1s slide-up;
    }
    @keyframes slide-up {
    0% {
    opacity: 0;
    height: 0%;
    top: 100%;
    }
    100% {
    opacity: 1;
    height: 100%;
    top: 0%;
    }
    }

    … to have the caption slide up from the bottom of the image.

    May 10, 2017 at 2:56 pm #791123
    Yigit

    Hi,


    @solidvapor     Thanks for sharing :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change image caption hover animation’ is closed to new replies.