WordPress.org

Forums

Virtue
[resolved] Gallery transitions (6 posts)

  1. BMH
    Member
    Posted 10 months ago #

    Hi,
    The theme is great, thanks!
    I would like to add some transitions to the lightbox wordpress photo gallery, eg a simple fade.
    I've tried it with css, but that doesn't seem to work.
    - I've created galleries through wordpress gallery in my portfolio pages.
    - Enable Virtue Galleries to override WordPress: is ON

    Thanks very much,
    Ben

  2. Kadence Themes
    Member
    Theme Author

    Posted 9 months ago #

    Hey,
    Can you explain a little more, maybe post a link? Do you want the image thumbnails to fade when you hover over them?

    Kadence Themes

  3. BMH
    Member
    Posted 9 months ago #

    Hi,
    I use the standard wordpress photo gallery. The thumbnails on the page etc. are okay for me. After I've clicked on a thumbnail and it opened in the lighbox, then I want to add a fade when I click through the large photos.
    Probably I can use a lightbox gallery plugin doing that. But I want to use as little as possible extra plugins.
    Thanks,
    Ben

  4. Kadence Themes
    Member
    Theme Author

    Posted 9 months ago #

    You can try this, add this css to your custom css box in the theme options > advnaced settings:

    @-webkit-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @-moz-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @-o-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    .mfp-figure {
      -webkit-animation-name: k_fadeIn;
    	-moz-animation-name: k_fadeIn;
    	-o-animation-name: k_fadeIn;
    	animation-name: k_fadeIn;
    	-webkit-animation-duration: .3s;
    	-moz-animation-duration: .3s;
    	-ms-animation-duration: .3s;
    	-o-animation-duration: .3s;
    	animation-duration: .3s;
    	-webkit-animation-fill-mode: both;
    	-moz-animation-fill-mode: both;
    	-ms-animation-fill-mode: both;
    	-o-animation-fill-mode: both;
    	animation-fill-mode: both;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility:    hidden;
      -ms-backface-visibility:     hidden;
    }

    Kadence Themes

  5. BMH
    Member
    Posted 9 months ago #

    Hey, that's great. Thanks very much!
    At first I noticed no difference. I had to increase the duration to see the effect :)
    And I've learned something new.

    All the best,
    Ben

  6. BMH
    Member
    Posted 9 months ago #

    Resolved :)

Reply

You must log in to post.

About this Theme

About this Topic