Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 1, 2019 at 6:14 pm #1096225
    quikretecanada

    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

    May 6, 2019 at 7:15 pm #1097782
    Vinay

    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 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

    May 15, 2019 at 9:04 pm #1101160
    quikretecanada

    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

    May 20, 2019 at 6:40 am #1102378
    Ismael

    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

    May 21, 2019 at 4:48 pm #1102926
    quikretecanada

    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

    May 23, 2019 at 10:10 pm #1103799
    Basilis

    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

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