Avada Forums Community Forum Before&After (fade) with URL/Link

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • talpazzo
    Participant
    Post count: 2

    Hi everybody,
    what I’m trying to achieve it’s an image with a rollover like in the “Image Before & After” (fade option) but with a link. I would like to have a second image appearing on top of the first one, but with a working link to a page.
    I tried to place the link URL in the Column General options (as it’s not available in the “Image Before & After), but I lost the effect on the image.
    Does somebody have any idea how to resolve?
    Thank you very much, Diego

    davejeff66
    Participant
    Post count: 3

    I am in exactly the same situation and would love to know if there is an easy solution to this.

    Thanks

    kdemay14
    Participant
    Post count: 2

    Same here. Any luck?

    talpazzo
    Participant
    Post count: 2

    Hey guys, I adopted another solution.
    I placed 2 containers:
    – Code Block (Container Visibility: medium/large): with the code you’ll see after (<div></div>)
    – Image: with only the “_over” image (Container Visibility: small screen): so if you open it with the smartphone you’ll not have problems (otherwise you’ll see both of the images).

    Max-height and max-width correspond to the image size.
    You can also create multiples images with the same code. You just change the SRC.

    The transition’s 1s in this example, I like it slow in this case.

    I hope it will help you.
    Demo here on the home page (the 3 bottom images): https://www.helvetica-cbd.ch/

    Cheers, Diego

    <div class="roll_01">
      <a href="www.google.com"><img class="bottom" src="url_image_bottom.jpg" /></a>
      <a href="www.google.com"><img class="top" src="url_image_over.jpg" /></a>
    </div>
    .roll_01{
     position:relative;
     max-height:337px;
     max-width:337px;
     margin:0 auto;
    }
    
    .roll_01 img{
     position:absolute;
     left:0;
     -webkit-transition:opacity 1s ease-in-out;
     -moz-transition:opacity 1s ease-in-out;
     -o-transition:opacity 1s ease-in-out;
     transition:opacity 1s ease-in-out;
    }
    
    .roll_01 img.top:hover{
     opacity:0;
    }
    BSpicer
    Participant
    Post count: 4

    This solution is a bit late, but if anyone searches, it may help.
    I created a Content Box, went into edit item, delete Title, delete Read More, then add your hyperlink URL. Scroll to Text area – Insert Fusion Builder element into text area – select ‘Image Before & After’ add Images, insert into text area. Save

    In Content box settings – change Link area to “Entire Content Box”. Set Link type to Text
    All other settings change as required.

    Regards

    77claudio77
    Participant
    Post count: 2

    Hi, it look perfect, only thing, i’ve got 3 image on one column, and will use some columns, can you guess ho to center the image to the page, the setting is only for right and left.
    http://claudiocasino.it/nicola_personal/
    Thx

    77claudio77
    Participant
    Post count: 2

    found it! in box Layout select Timeline Horizontal =)
    Thx a lot for helping

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