CSS rollover effect options

:point_up_2: :point_up_2: :point_up_2:

@JDW x @Creative check this work around. It works like a charm! ALL PROPS TO @nelo

:partying_face::handshake:

Three images are required? I assume that means we will actually need nine images, since each of those three images would need a 1X, 2X, and 3X image, correct?

Would one of you mind posting a single page Blocs 3.x document that has the working rollover example?

Thank you.

1 Like

Hi @JDW, hi @nelo

nelo, can i send your file to JDW? Are you ok with it?

We all would like to participate.
This is a really good workaround.

1 Like

Try this.
image-hover-effects.bex (37.1 KB)

1 Like

I just noticed that the following tech web site I go to quite often uses a red color rollover effect on their top stories in the desktop/laptop view, similar to @nelo’s effect, although the headline text is not affected.

For the tablet view of top stories on this web site, the color rollover effect is obviously not available. For the smart phone view of the top stories, they use a carousel of the top stories in a very different layout from the desktop/tablet views.

It’s interesting how large news web sites use different layouts and effects on the different viewing platforms.

1 Like

Very nice. Thanks a lot Whittfield.
Is there an option to reverse the effects?

image-hover-effects.bex (37.3 KB)

3 Likes

Bravo.
Excellent.
Thanks a lot, this is very helpful.

Very cool!!!

:heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart: :heart:

@Whittfield this is christmas in the middle of this hot summer. I owe you one. And I mean it. This is really great.Thank you very very much. As also big thanks for the very clever work around from @nelo

THIS IS what I call real community support. Thumbs up!

Very nice. Thank you for that link and insight.

I think those old skool effects have their place as the tactile devices adapt to behaviour from the desktop. As read in Wired there is big urge by humans to feel and see feedback on interfaces. Therefore we have visual feedback on Procreate and other creative apps on iPads, force-touch and/or 3d touch. – The term rollover / hover is misleading, maybe the ipad-Generation need to invent a new name for it :wink:

Did you try the workaround? Do you have any questions?

I tried the workaround. But couldn’t get to work.
I don’t really understand the procedure.

The used picture is a 100% trabsparent PNG, the pictures within the class (normal & hover) are 90% transparent PNGs. This is the trick :wink:

Hello and regards, I am glad that everyone’s response and help to resolve this request.

Sorry for the delay in answering, you can always share resources to help the whole community! regards

1 Like

OK. Got it.
Works perfect.
Thanks a lot everybody.

1 Like

My feeble brain needs help. I double-clicked the *.bex file and something installed in Blocs, but I can’t seem to find it when working in Blocs. I created an image and clicked “Bric Library” but I cannot find anything with “hover” in the name. I don’t see it when I search for “image” either. What’s the trick to getting it to work?

Thanks.

Material Design is a UI kit for Bootstrap, so you would also have to add MD assets to get that working and then just use the code widget.
I haven’t tried using MD with Blocs myself though, but it should be possible.

James,
do you have different versions of Blocs installed?
Could be, that the bric is in the wrong blocs library.

It should be in yourname/library/application support/blocs3/brics/image-hover-effects/