Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 6, 2015 at 9:54 pm #514793
    amrman0

    Hello and thanks for the great support,

    I’m using the photography theme of Enfold. Is there an easy way to make the image hover “zooming” effect slower (like the zooming action would take 1-2 seconds instead of the default of about 0.5 second) in the ‘Masonry Gallery’ element?
    Preview: http://kriesi.at/themes/enfold-photography/portfolio/

    One more question please, in the case of the ‘Portfolio Grid’ element, when you hover over an image, you get a circle with an arrow inside. Is there a way to replace that circle and arrow with another image, and if that is not easily done, can we replace the circle and arrow with a zooming effect such as in the case of the ‘Masonry Gallery’ element I talked about in my first question?

    Thank you.

    October 7, 2015 at 8:19 am #514971
    Rikard

    Hey amrman0,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    October 7, 2015 at 9:22 pm #515442
    amrman0

    Hello Rikard,

    Thanks much for your support. My client has 4 things that he would like to change about his site if possible (he’s a details fanatic).

    1. Is there an easy way to make the image hover “zooming” effect slower (like the zooming action would take 1-2 seconds instead of the default of about 0.5 second) in the ‘Masonry Gallery’ element? Example: http://dc0.e8c.myftpupload.com/portfolio-item/el-gouna-sabina-villa-id-86344/

    2. In the case of the ‘Portfolio Grid’ element, when you hover over an image, you get a circle with an arrow inside. Is there a way to replace that circle and arrow with a company logo image, and if that is not easily done, can we replace the circle and arrow with a zooming effect such as in the case of the ‘Masonry Gallery’ element I talked about in my first question? Example: http://dc0.e8c.myftpupload.com/buy/

    3. Is there a way to remove the squares around the arrows to the right and left of the ‘Full screen slider’ element (I don’t want to hide the arrows but I want to get rid of the boxes surrounding them). Example: http://dc0.e8c.myftpupload.com/investment-projects/

    4. Finally and most importantly, I would like to change the background color of the first button in the ‘Full screen slider’ element from Orange to Yellow. I used this code before “.slideshow_align_caption a.avia-slideshow-button:nth-child(3) {color: black !important;
    background-color: yellow !important; }” in quick CSS (found the code by searching in the forum) and it worked when the ‘full screen slider’ had a headline caption on it, but when I removed the headline caption, the button returned for some reason to the original orange color again. Example: http://dc0.e8c.myftpupload.com/

    Thanks again.

    October 7, 2015 at 9:55 pm #515459
    Basilis

    Hi!

    Everything is possible, but that would need a lot of work to be done.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Regards,
    Basilis

    October 8, 2015 at 4:16 am #515541
    amrman0

    Hi Basilis,
    I was asking to see if any of the 4 points I mentioned could be EASILY done with 1 or 2 lines of code in quick CSS. My client can’t afford customization work. I’m sure you can at least help me with point #4 above, please review what I wrote about it, it should be easy.

    October 9, 2015 at 5:56 am #516150
    Rikard

    Hi,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    October 9, 2015 at 7:06 am #516181
    amrman0

    Thanks Rikard,
    The login credentials are included in private. If nothing else, I need to solve point # 4 the most.

    October 10, 2015 at 1:38 pm #516787
    Ismael

    Hi!

    Thank you for the update.

    If possible, please create a separate thread for each inquiry. It will make it easier for us to answer your questions and for users searching for the same issue.

    1.) Add this in the Quick CSS field:

    .av-masonry-image-container, .av-inner-masonry-content, .av-masonry-pagination {
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

    2.) Try to replace the arrow icon with this in the Quick CSS field:

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: url(image.jpg);
}

    https://css-tricks.com/almanac/properties/c/content/

    3.) Add this in the Quick CSS field:

    #top .avia-slideshow-arrows a {
    background-color: transparent;
}

    4.) We answered your inquiry here: https://kriesi.at/support/topic/fullscreen-slider-button-color/

    Best regards,
    Ismael

    October 11, 2015 at 7:40 am #516897
    amrman0

    Excellent support for this theme, thanks so much Ismael, I will be using Enfold for all my clients in the future. Regarding the issues at hand, I will take your advice and open different threads for separate issues in the future. Here are the results of your code suggestions.

    1. Your code worked flawlessly.
    2. Your code worked well.
    3. Your code didn’t hide the frames around the arrows as I wanted, so I searched more in the forums using keywords from your code, and I found this code that worked great : #top .av-control-minimal .avia-slideshow-arrows a:before { border: none; }
    4. Your code worked flawlessly.

    Thanks again.

    October 12, 2015 at 11:53 pm #517769
    Andy

    Hi!

    glad Ismael could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Cheers!
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘'Masonry Gallery' & 'Portfolio Grid' Image Hover Effects’ is closed to new replies.