Before&After (fade) with URL/Link

[talpazzo]

#527109

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]

#535322

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

Thanks

[kdemay14]

#558157

Same here. Any luck?

[talpazzo]

#558208

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]

#693286

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]

#725327

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]

#725331

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

[Author]

Posts