Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 8, 2015 at 6:16 am #392632
    Justin

    Any easy way to have both the over display of text always on as you’re seeing from the link
    But then have the entire cell have a hover effect with the default or customer overlay image popping up?
    Make sense?

    Thanks!

    February 9, 2015 at 5:52 pm #393181
    Yigit

    Hi Justin!

    Please add following code to Quick CSS

    .av-image-caption-overlay:hover {
background-color: rgba(255,255,255,0.5);
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}

    Cheers!
    Yigit

    February 10, 2015 at 6:34 am #393496
    Justin
    This reply has been marked as private.
    February 10, 2015 at 1:23 pm #393658
    Yigit

    Hi!

    Can you please add following code to Quick CSS as well

    .av-image-caption-overlay:hover { background-size: initial!important; }

    Cheers!
    Yigit

    February 11, 2015 at 12:08 am #394096
    Justin
    This reply has been marked as private.
    February 11, 2015 at 2:53 pm #394356
    Yigit

    Hey!

    You can apply the same CSS3 effect using following code 

    .av-image-caption-overlay:hover {
-webkit-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); 
}

    But since you have your text inside “av-image-caption-overlay”, it would be animated as well

    Regards,
    Yigit

    February 11, 2015 at 9:58 pm #394702
    Justin
    This reply has been marked as private.
    February 12, 2015 at 2:04 pm #394989
    Ismael

    Hey!

    Replace the code with this:

    .av-image-caption-overlay:hover .av-image-caption-overlay-position {
-webkit-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

    Regards,
    Ismael

    February 17, 2015 at 8:17 pm #397760
    Justin
    This reply has been marked as private.
    February 17, 2015 at 8:18 pm #397762
    Justin
    This reply has been marked as private.
    February 18, 2015 at 10:18 am #397997
    Ismael

    Hi!

    The animation avia_pop_small works exactly that way so if you want a different animation, you need to create your own. Use css keyframes:

    http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
    http://www.w3schools.com/css/css3_animations.asp

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.