Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1096225

    Hi,

    I would like to add a sonarEffect animation to an image and I tried to make a unique css (custom-image2) so it wouldn’t change all the images on my website. However, I’m not sure how I should call the image on CSS. I tried using av-image, avia-image-container, av-image-caption-overlay, avia_image, but none of these are working.

    I was wondering if anybody could help me with the code below:

    .custom-image2 .avia-image-container img:hover {
    -webkit-animation: sonarEffect 1s ease-out;
    -moz-animation: sonarEffect 1s ease-out;
    animation: sonarEffect 1s ease-out;
    }
    @-webkit-keyframes sonarEffect {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
    }
    @keyframes sonarEffect {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
    }

    Thank you

    #1097782

    Hey quikretecanada,

    To add a sonarEffect animation to your images please follow the below steps.

    1. Enable custom CSS class name support.

    To enable custom CSS class name, please go to Enfold theme options > Layout Builder and check “Show element options for developers” for more information please check our (Purchase code hidden if logged out) /# (Purchase code hidden if logged out)(Purchase code hidden if logged out) ” rel=”noopener” target=”_blank” rel=”nofollow”>documentation.

    2. Give your image a custom CSS class name “mySonarEffect”.

    3. Add this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    /* CSS - */
    
    .mySonarEffect img:hover {
      animation: mySonarEffect .85s infinite;
      transition: background-color 0.5s;
      transition: 0.5s ease all;
    }
    
    @keyframes mySonarEffect {
      0% {
        box-shadow: 0 0 0 0 #fff;
      }
      100% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
      }
    }

    Best regards,
    Vinay

    #1101160

    Hey Vinay,

    Thanks for your assistance.
    I tested your CSS and it works for regular images without links, but it is not working when I change the image styling to “circle” and/or there is a link.
    FYI- I made a CSS to remove the lightbox and arrow animation when the image has a link.
    The images I’m working on are 300 by 300 px and they have a transparent background so they are clean when I select image styling as “circle ”

    Thanks,
    Tomas

    #1102378

    Hi,

    Thanks for the update.

    That page doesn’t exists. Did you move the site? Please post the new url in the private field.

    Best regards,
    Ismael

    #1102926

    Hey Ismael,

    The site is still up, the thing is that it is only accessible INSIDE the company network (or on VPN) for now. What I can do is to create a page in a partner website that we also designed so you can see what’s going on. Please check the link below and I’ll add the same coding we were using for this topic.

    Thanks

    #1103799

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.