Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 9, 2018 at 6:02 pm #1007641
    Munford

    HI
    My client would like the opposite effect of the hover on the gallery of the pages like the one below – that is to have the photos without transparency when they load and have the overlay/transparency on hover only. Can you send me the correct css for this?
    thanks so much
    nancy

    • This topic was modified 6 years, 2 months ago by Munford.
    September 9, 2018 at 6:32 pm #1007651
    Mike

    Hey Munford,
    Please try this code in the General Styling > Quick CSS field, or in the WordPress > Customize > Additional CSS field:

    #top.postid-7869 .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1 !important; 
}

#top.postid-7869 .avia_desktop .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container {
    opacity: 0.7 !important; 
}

    Best regards,
    Mike

    September 10, 2018 at 9:24 am #1007817
    Munford

    HI
    Thanks for your help
    I need this to be a global change not just on that page, but on that code did not change anything as far as I can see.
    any ideas?
    Nancy

    • This reply was modified 6 years, 2 months ago by Munford.
    September 10, 2018 at 7:25 pm #1008036
    Jordan Shannon

    Hi,

    Have you tried adding the code to the very top of quick css so it runs first, and clearing the cache a few times over?

    Best regards,
    Jordan Shannon

    September 10, 2018 at 9:47 pm #1008080
    Munford

    yes it is at the top and cache cleared. could there be other code interfering?

    September 10, 2018 at 10:07 pm #1008087
    Jordan Shannon

    Hi,

    Possibly, do you have additional custom css running? Please provide admin info if possible so we can look into this issue further.

    Best regards,
    Jordan Shannon

    September 10, 2018 at 10:35 pm #1008091
    Munford

    thanks for taking a look!
    I can only find some code below that disabled/changed the animation on the galleries – not sure if it’s messy or OK (I am a copy/paste coder for the most part).
    My client wants no animation on the galleries, and only transparent overlay on hover.
    best
    Nancy

    /*ANIMATION*/
/* Masonry image load animation*/
.avia_desktop .avia_transform3d .av-masonry-entry .av-masonry-item-loaded .av-inner-masonry{
transition: opacity 2s ease-in;
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}

.avia_sortable_active .isotope {
    -webkit-transition: none;
    transition: none;
}

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none !important;
    animation: none !important;
}

/*disable lightbox animation*/
.mfp-img {
transition: all 4s ease!important; 
 transition-delay: 4s!important;
}

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    -webkit-transition: none;
    transition: none;
}
    September 11, 2018 at 2:31 am #1008133
    Mike

    Hi,
    Thanks for the login, I see that you put the css in your child theme style.css, typically when adding css to there when you are using the css & js merging option, you will need you re-save your theme options to re-build the merged files.
    I did this by adding a blank space to the Enfold Theme Options > General Styling > Quick CSS field and then saved your theme options, the big blue button.
    I also cleared your two cache plugins.
    I also removed the page specific rules so the effect will be global for the “av-masonry-image-container”
    Please clear your browser cache and check.

    Best regards,
    Mike

    September 11, 2018 at 9:03 am #1008261
    Munford

    HI Mike
    wow thanks for your great help! Looks fine. I have just started using the style.css editor so it’s good to learn some best practices. Is it OK to use that merging option? I had re-saved the options a few times but maybe not in the right way, Should I only use one caching pluigin?
    best
    Nancy

    September 11, 2018 at 12:31 pm #1008352
    Mike

    Hi,
    Glad we could help, we recommend using the merging options after you have finished building your site, the same for caching plugins.
    These are great for making your site faster, but while designing, they can be tiring because you (anyone) won’t be sure if the new css is written wrong, or if the cache isn’t clear.
    It’s best to use only one cache plugin, and it won’t need to minify css or js if you use the built-in merging.
    You may find using the Enfold Theme Options > General Styling > Quick CSS field to be handy while testing new css, and then move it to your child theme style.css when your happy with it’s results.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    September 11, 2018 at 3:13 pm #1008429
    Munford

    OK so as I understand it, use quick CSS for quick changes, move into style.css when it’s OK (and great with the editor/fix finder there) and then at the end use a caching plugin/ merging. Is there any problem with turning off that merging option after it’s been turned on? I think I had the 2 caching plugins active because I was testing different ones. Any preferences to use with enfold?

    thanks for your help & advice.

    September 12, 2018 at 11:59 am #1008865
    Mike

    Hi,
    There is no problems with turning the merging on and off. If you look at the Enfold Theme Options > Performance options page the dev team has linked to the caching plugins that they recommend.

    Best regards,
    Mike

    September 12, 2018 at 12:42 pm #1008876
    Munford

    thanks you can close this thread.

    September 12, 2018 at 1:18 pm #1008892
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘image overlay on hover / masonry gallery’ is closed to new replies.