@Norm, I’d love to be able to perform these types of CSS rollover animations on photos in Blocs. It seems that you already have the structure in place with the dropdown list in the Animation section of the Inspector panel, but would just need to add a few options. Check out this link and see if you agree they’re not only cool, but also highly usable. In other words, they’re not so crazy that they’d make a page too busy, but they are rather subtle but cool at the same time.
I especially like the Zoom-In Effect and some of the Text Animations towards the bottom…
Here are similar effects, and the code is even given, but I haven’t the faintest idea how to recreate them in Blocs because although I can create Classes with spaces in the name, I cannot for the life of me find a way to attach them to specific objects on the page. The code also specifies a DIV within a DIV, but I can’t seem to accomplish that feat in Blocs either.
I’ve been trying to do a simmilar thing @Creative and @JDW have posted here:
a simple image-rollover like done in the late 90s … by that I mean:
– Image 1 is displayed,
– I hover and
– a second image gets visible while image 1 dissapears.
I tried the work-around by @Eldar with a nested button in a card, I tried with the other trick with a button rollover, I bought the nice “ImageOverlay” by Cazoobi / @Norm and the powerfull “Card Designer” by @Whittfield. All those options work fine but not as simple and clean as the hover-effect should be.
Please take a look on what I mean how it should go:
I want to apply it on several images on a gallery / folio-page.
Is anybody here able to recreate this as a bric (I pay for it. DM me please with your price …) or knows how to achieve that by extra code?
Also: maybe this is something for the wishlist for @Norm ?
It’s tragically clear this isn’t on the radar. The opening post has a mere 5 hearts despite its 310 views (at the time of this writing), and my previous post has a mere 2 hearts. Your post has 1 heart because I just gave that to you. You’d think more people who took time to view this thread would have clicked Like/Heart. I doubt they dislike or disapprove of the content. It’s probably just laziness. But the lack of Likes has a negative impact, I think. If 1000 people clicked Like on the opening post, it probably would have appeared in Blocs or a Bric by now.
This is why I still use Freeway 7 Pro to maintain a lot of my existing sites. There’s so much basic functionality I’d lose if I rebuilt them in Blocs – rollovers being one big feature. Of course, all of my Freeway sites are NOT responsive, which in this day and age is a problem.
My hope is that some desirable functionality will appear in the next major update of Blocs. I’m not holding my breath on paid Brics though because Bric builders clearly don’t care about adding these features, regardless of the profit potential as evidenced by the fact we still don’t have a Bric solution that is as easy to use as Freeway 7 Pro (or many other web design apps for that matter). Not sure if that is due to a lack of coding ability or time or both. I lack the time and coding ability to even make a most basic bric. I know Norm has the skill and coding ability, so it’s just a matter of time for him to choose the right features to implement in Blocs or a separate Bric. But the question is “how much time”? It could be years.
Suffice it to say, the faster these new and important features can present themselves to us, the faster I can move/rebuild existing sites from Freeway to Blocs. I really like Blocs. But we need new features to keep it modern and moving forward.
If I had to choose between my site being responsive or having a roll-over effect hands down I would have a responsive site. My clients would find another designer if the site was not responsive and I would not even think of charging a client for a non-responsive site.
Sure, if you are creating a brand new site or working for a variety of paying clients. Of course! But if you had to decide whether or not to spend literally months rebuilding every single page of a 100 page non-responsive website for a company you already work for and who is not paying you anything extra to do that job, would you rebuild it, alone, by yourself, and risk losing functionality others may complain about? Would you do that especially when the company doesn’t even care if the website is responsive or not? Perhaps in that case you would not. And that’s my situation. I’m not doing web design as a full time job for clients outside the company I work for. I simply look at Google Analytics and see more people using mobile devices and made the personal decision to rebuild certain parts of one of our existing websites in Blocs – parts that people wouldn’t complain about if some functionality was lost. And yes, I am talking about more than just rollovers.
Yes, I would definitely update the site to Mobil friendly. It may take some time, but I would and have done that. I wouldn’t want my name associated with it.
From a standpoint of a professional senior creative director who started in the peak of the “dot com”-era this question shouldn’t beed asked in the year 2020. A roll-over is a basic operation needed in UX (focus on the experience), responsiveness is a technical key to be visible on the market and get to all the users. Both “features” are not comperable as they belong in two different categories. – Just as an example: lightboxes, accordeons, slide-shows are more complex to code and are used less on the market, therefore also dispensable elements, but we still have them.
Said that: I wouldn’t recommend to open a dicussion here guys. Let us focus on a positive outcome: how can we get a simple image roll-over into our projects using Blocs. There must be a way …
So this will be a feature in the upcoming release? If so: BIG LOVE to you mate ;). I have time to implement this option until mid september. So there is plenty of time.
On the topic of Bric-building: I don’t know much about this kind of “magic”, I took a look at the doc https://help.blocsapp.com/knowledge-base/custom-bric-structure/ and tried to figure out the thing. It is for me to complex to learn now … Said that, what would be the efford (time = money) to invest to build that? If you like maybe you can send an estimate to me via DM?
THANK YOU once again for the hope in your post above!
I agree with @casey1823, Responsive is more important than rollover effects due to the higher percentage of site visits being via mobile, touch screen devices. This itself points to the decreasing need for rollover effects - touch screen devices don’t display them because they cannot detect a rollover of someone’s finger! Whilst it is always nice to have these UX interactions, they are becoming less relevant for focussing attention - on-scroll animated effects and effective use of colour are becoming more effective at this sort of thing because they work across all devices. Most of my commercial customers are really not bothered about effects - they are more concerned about simplicity of use and accessibility across all devices. It’s a bit like the declining need for drop-down menus - I’ve only had 1 client in the past 6 months that actually insisted on drop-downs - most clients don’t want anything that interferes with the normal swipe and tap simplicity of on-page links to other site pages. It gives them the opportunity of “guiding” the visitor through the site to achieve the desired objective of the site.
I think my reply and @hendon52 reply has nothing to do with Facebook. Hendon52 simply stats that roll-over effects in today’s web design with mobile dominating users, makes no sense. I thought he wrote a very clear reply on why it’s just not as important anymore.
Maybe the help you and JDW are asking for has not been solved or even commented on much is not people being lazy but this not being important to most designers.
There is no reason to be so aggressive. The section that @creative filed his request in was “Wish List”. Furthermore, although he posed a question directly to @norm, he did post in the forum and asked specifically for people to check a link to see if they agree. The whole point of a wish list section is to better understand what users want from the app so that the developers can assess whether or not it’s worth utilising development resources to incorporate them in the app. That can only be effectively done if people express an opinion regarding the suggestion. If the post had been under the “I Need Help” section, then it would perhaps be more reasonable to expect others to post a constructive solution. But this isn’t the case here. People like @JDW posted a perfectly valid and polite response in support of the wish, so did you. Just because I don’t view its importance in the same way, it doesn’t mean I cannot express my opinion. I wasn’t disparaging to anyone - I was just expressing an opinion in a section of the forum designated for such discussion.
I suggest if you wish to achieve these effects and do not know how to do it, it would be better to ask for help in the correct section of the forum. The effects can be incorporated if you know how to add the code to your project. If you don’t know how to do that, ask for help specifically rather than hijacking a wish list thread.
Please don’t lecture me about rules and behaviour within the forum culture. I am aware of them very much. The disussion is placed where it belongs.
Furthermore I do not wish to be accused of beeing aggressive. To quote myself from this thread:
(…) I wouldn’t recommend to open a dicussion here guys. Let us focus on a positive outcome (…)
While we asked for a feature (CSS-effects), you two started an off-topic (responsive sites instead rollovers) which has nothing to do with the “wish list” item, followed by assumptions (“most designers”) and misguiding informations (“roll-over effects in today’s web design with mobile dominating users, makes no sense”). Just false or at least very one sided statements.
This topic is titled very clearly “CSS rollover effect options”. Nothing more. How did you exactly help us to get just a step towards a solution?
Greetings, make a color rollover I think it is something simple for a couple of images! I leave you a video and tell me if it works for you! It’s an image and a custom class! …
DAMN, yes, this is what I was going for @nelo – simple but great idea. THANK YOU!
Did you attach the class to the image? My goal is to have a B/W pic on _normal and and colored pic on _hover. So your first idea could work as the colored pic would get de-satureated with a black overlay. BUT: when I apply it … nothing happens. How did you apply it?
The second idea works … I tried it before. But when I change the pix with classes, they are behaving strange while changing the size of the browser.
Use a 100% color class, the secret and it may sound funny but you have to place the image at 90% transparency! … the class is only customized as follows:
… by that I mean:
