Hover FX from one pic to the other

#1

@tav
I’m looking for a special hover effect for a video preview.

Normal state should be a fixed screenshot of the video - maybe with play button in the middle
The hover state should show a gif, or a short sequence of the video.
So a fade from one image to the other.
The idea is to use BWD Section Box for this. One image in the background, one image as a overlay.
How would I give Section Box, that has no content then, a (not proportional to the browser) height to show the background with it’s hover effect.

#2
#3

The usual way is just to add some % padding to it.
Percentage padding will always be proportional to the width of the element so if you add a bottom padding in % then it will give you an aspect ratio.

For example a 56.25% bottom padding will give you an aspect ratio of 16:9.

Its easy to work you what you need its just (height / width) * 100

so 9 / 16 = 0.5625

x 100 = 56.25% and so on.

If of course you wanted a fixed height then just use pixels.

Sections box has advanced padding options so that you can alter your aspect ratio at 3 different breakpoints as well should you wish.

#4

Thanks for your quick reply, Tav.
afk. I’ll try that later on.

#5
3 Likes
#6

@tav
Hey Tav,
in RW preview the hover FX works.
In Safari, too.
But it doesn’t in Firefox or Edge.
Am I doing something wrong here?

#7

They should work fine in all browsers. Does the demo page work for you in FF or Edge? It works for me in FF and Chrome (I presume that you have the new Chromium based Edge?)

If you can email me a link to your published page then I’ll take a look this evening.

http://sectionspro.bigwhiteduck.com/box/hover-captions/

#8

Yes the demo page works fine.