Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 30, 2018 at 3:06 pm #1003653
    studioc4com

    Hi,

    I’m trying to change images on mouseover but it gives me a lot of bug.
    I create a Code Block and use this kind code on my Homepage 6 round icons


    <img src=”URL OF FIRST IMAGE GOES HERE”
    onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE’;”
    onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE’;”>
    </img>

    At first, it was working, but, just one time. The image was changing to the second, one time. And after, not.

    But after, it seems to give me a lot a technical bugs and difficulty to save. Not sure if this is related but maybe.

    Can you help me with this and told me the best way to do this? I tried one solution that I saw on the forum (adding code to the functions.php and adding a class to the image). But it was not working.

    Thanks.

    August 30, 2018 at 8:06 pm #1003770
    Basilis

    Hey studioc4com,

    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

    August 30, 2018 at 8:31 pm #1003783
    Guenni007

    do you mean something like this – move over the image beyound the banner:
    https://art-varij.de/
    you don’t need a code block for it – just take a image alb element ( but do not choose the scale effect on it)
    i gave to the image alb element a custom-class: seen

    this is the css for it:

    .seen .avia-image-container-inner {
background: rgba(0, 0, 0, 0) url("/wp-content/uploads/second-image.jpg") no-repeat scroll 0 0 / cover ;
}

.seen .avia-image-container-inner img {
    opacity: 1;
    -webkit-transition: opacity 2s linear;
     transition: opacity 2s linear;
}

.seen:hover .avia-image-container-inner img {
    opacity: 0;
    -webkit-transition: opacity 2s linear;
     transition: opacity 2s linear;
}
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.