Custom CSS Hover on ALB Image Element - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 5, 2014 at 6:56 pm #232864

stacyr311
Participant

Hi again!

I added the necessary PHP to the functions.php to enable Custom CSS on ALB elements. But I’m still having some difficulty with what I’m trying to accomplish (I’m not very proficient in CSS).

Toward the bottom of the page, I have inserted three images in three separate columns (the three red circles). What I’m trying to accomplish is when a person hovers over one of those circles, a new PNG image will appear in the same position as the static image (the hover image is at http://www.fpcosms.com/fpcnew/wp-content/uploads/2014/03/gather-hover.png). What should I put in the custom CSS field to allow this to happen? I have a different hover image for each of the three circles. None of them will be linking anywhere…just need the hover effect.

Site is on a test link: http://www.fpcosms.com/fpcnew

I hope you can help me out!

March 6, 2014 at 7:34 am #233077
Ismael
Moderator
Hey stacyr311!

Thank you for the question. I hope all is well with you today.

Please refer to this link: http://selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/

Instead of using the Image element, please use a text block then follow the steps on the link I gave you. You can place this image: http://www.fpcosms.com/fpcnew/wp-content/uploads/2014/03/gather-hover.png as the data-hover:
```
<img src="first.gif" data-hover="http://www.fpcosms.com/fpcnew/wp-content/uploads/2014/03/gather-hover.png" />
```
Place the jquery code on js > avia.js on line 7 below this code:
```
$(document).ready(function()
    {
```
Make sure that the first image and the rollover has the same size for better results.

Best regards,
Ismael
March 6, 2014 at 4:31 pm #233213

stacyr311
Participant

Thank you…I will give this a try.

I had the image hover working before using the text block. But the reason I was trying to use the Image element and the custom CSS was to keep the bottom to top fade in animation when the images first come up. Is there any way to keep that while still having the image hover using the text block element?

March 7, 2014 at 6:13 am #233605
Ismael
Moderator
Hey!

The problem is you’ll get an infinite css animation. You can try this:
```
<div class="avia-image-container"><img class="avia_image avia_animated_image avia_animate_when_almost_visible bottom-to-top avia_start_animation" alt="" src="FIRST IMAGE URL HERE" data-hover="http://www.fpcosms.com/fpcnew/wp-content/uploads/2014/03/gather-hover.png"></div>
```
Cheers!
Ismael
March 7, 2014 at 6:28 am #233613

stacyr311
Participant

Ah. OK, now I get it. The code didn’t work for the hover, but I’ll just remove the image element and animation and do as you suggested by putting it into the text block and using the steps above to make an image hover. I appreciate your help!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Custom CSS Hover on ALB Image Element’ is closed to new replies.