-
Posts
-
Hi,
Typically when adding a hyperlink to an image it shows a rollover when hovering the mouse over it. Now I have made a page with several images linked to another page but they don’t show the rollover on hovering, whereas the frontpage does. Please advise, since I like the effect of the rollover.
http://lavitasana.oscar.nl has the rollover.
http://lavitasana.oscar.nl/sports/ doesn’t show the rollover.
Hi,
How did you add the images without rollover effect?
If you want the rollover effect, you need something like this
<a href="http://www.klimhal-events.nl" class="avia_image avia-builder-el-3 avia-builder-el-no-sibling avia-align-center ">
<img class="avia_image avia_animated_image avia_animate_when_almost_visible top-to-bottom avia_start_animation" src="http://lavitasana.oscar.nl/wp-content/uploads/2013/05/landing-LVS-021-300x240.png" alt="">
<span class="image-overlay overlay-type-extern" style="opacity: 0.7; left: 0px; top: 0px; display: block; height: 240px; width: 300px;"><span class="image-overlay-inside"></span></span></a>This line of code is the rollover effect
<span class="image-overlay overlay-type-extern" style="opacity: 0.7; left: 0px; top: 0px; display: block; height: 240px; width: 300px;"><span class="image-overlay-inside"></span></span>They need to be included.
Regards,
Ismael
I added the images in Avia Builder by making a column, then adding an image element. And I did both that on the landing page as well as on the page where the rollover doesn’t appear. I always use the Avia builder in your theme so I thought it strange that the rollover appears in one place but not in another.
Hi,
Just added a new page where I:
– added four 1/2 columns, added a text block and an image block in each of them
– added a hyperlink to each image I inserted
and all four have the rollover effect, without me having to use the code you supplied above. Now, why is it that this happens seemingly arbitrarily? Shouldn’t the rollover effect either appear everywhere or nowhere by default?
http://lavitasana.oscar.nl has the rollover.
http://lavitasana.oscar.nl/sports/ doesn’t show the rollover.
http://lavitasana.oscar.nl/voeding/ has the rollover (the new page).
Okay,
I found out what makes the rollover appear or not: it disappear when using 1/4 or 1/5 columns, it appears when using 1/3 and up. Is this inherent to the theme or perhaps a small bug?
Regards,
Ying-Fu
Yes – Kriesi implemented a logic which will remove the overlay if there’s not enough space for the icon (simple because it looks broken in this case). If you still want to display it open up enfold/js/avia.js and search for:
if(current.outerHeight() > 100)Replace the value 100 with a smaller one (eg 50)
- The topic ‘Hyperlink rollover not working’ is closed to new replies.