Hover/reveal CSS help


#1

Hi,

I’m using this bit of css to control a :hover over an image to reveal a set of text & images below.


#lp-pom-image-232 {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#lp-pom-image-223:hover + #lp-pom-image-232 {
    opacity: 1.0;
}

It isnt working in preview mode and i can’t work out why. 


#2

Any updates to this?? thanks


#3

Or do i need to use jquery?


#4

Brad,

I am 99% sure it won’t work in preview mode. You’ll have to push the page live to see that kind of css. There are some bits of code that the preview can’t handle and I am reasonably confident that this is one of them.

Joe


#5

Thanks Joe,

However the code isnt behaving as required, here is the page http://unbouncepages.com/universitii-lightbox-45/

Can you suggest another way this can be done?


#6

Hey @Brad_Walls,

Just wanted to add in some links to new tutorials on how to add hover elements to your landing pages!