Is it possible in Blocs to have a graphic change when you hover over or click on it? My goal is to display all the apps I use and, when clicking on the “Expert in:” link, highlight the apps I master for the visitor. I can easily achieve this in RapidWeaver, so I’m wondering if Blocs offers similar functionality.
Hi @AlbertKinng
I would do it as a Tab - have 1st tab with all options and then the Expert In on the other tab?
I guess a few ways of doing it.
Good luck !
How you approach this depends on the outcome you actually want.
You say click and hover? And do they stay like that? Or change back when you hover off? Or click again?
Do you really need to change the image or just add an outline? You could even have the other ones fade to a lower opacity.
Lots of ways to do it, and the methods range from pure CSS to using JavaScript and CSS. You would need JavaScript if you want to click.
Just hovering, easily with CSS, there are a range of selectors you can use to achieve various results. The structure of the build matters here too.
I’m not at my mac and can’t recall if you could use the built in interactions to toggle a class to achieve this.
Ps. A provided solution requires a monthly subscription 
1 Like
Agree with Pete, CSS / JS.
Natively ? Or with a Stack, if so which one so we can see the effect ?
2 Likes
Change back when you hover off. Not clickable. Just hover over the word to highlight the icons. You make me laugh with the subscription pun. 
A stack. Works great. See here: hover and click stack
I did this sample in html using Panic’s Nova to let you know what I’m looking to do with Blocs. Just hover the mouse in the sentences to see the way the squares react. I am learning Blocs and that’s why I’m asking how to achieve it. Otherwise I do all this manually 
I would just use CSS then.
Some of the styles that you would use like scale, are not in the class editor. So you will have to add this to the css area in the code editor.
Also how you build the structure matters too. Make sure the hover text is within a parent. Make it easy for yourself.
Eg. Proof of concept. Pure CSS on hover scale and add a drop shadow to the feature icons. Ones that are not feature, become greyscale and drop their opacity.
1 Like
Could you please clarify how you obtained the floating code editor? Is it the same code you uploaded in the project settings, or is it specifically compatible with the brick you are using? I apologize for any confusion caused by my previous question.
While I can create and upload a CSS file to achieve the desired effect, that would be considered traditional coding. I was hoping to explore how Blocs allows for a coding-free approach, similar to what can be done in Rapidweaver. I am simply seeking to learn how to use Blocs effectively in order to add bricks and build pages.
If your suggestion involves using CSS, then that aligns with the solution I had in mind. I am considering if the tasks I want to accomplish with Blocs will require me to add my own HTML, CSS, and JavaScript code. If so, I wonder what advantages Blocs offers in comparison. I hope you understand that my intention is not to criticize, but rather to analyze the learning process of this app.
One of the main reasons I wish to switch from Rapidweaver is because I currently find myself coding almost everything, whereas I expected a web builder that doesn’t require coding.
Could you please share the sample project? I find that I learn best visually, so being able to see what you have done would greatly enhance my understanding.
The code editor is built in, and you will see an option for it in the drop down menu. You will find more information about the code editor and the input zones in the help files. Well worth reading.
Regarding being a codeless web builder, you will need to take that up with the dev of Blocs, but you will find all page builders have limitations. If I am not mistaken, your RW solution was a 3rd party solution, and there are only a few of us developing 3rd party brics for Blocs.
As I mentioned in my above post, some of the styling you will need to use is not in the Class Editor, so you will need to manually add it. If Blocs had some of the very common style elements such as transitions, scale and timing etc, it could be done without code. You can do a feature request about this to the Dev… it can be added to my past ones, and those of others. 
Sorry, I didn’t save the project, I just made it as a proof of concept that it’s possible. And yes it was pure CSS, all made inside Blocs itself.
1 Like
Oh, I see. If that’s all you did, then I will do the same. Unfortunately, it’s not the solution I was hoping for. My intention is to make this tool accessible for someone who doesn’t know anything about coding, so that I can ask them for minimal changes and so on. As I mentioned before, my main tools are Nova and Rapidweaver (hopefully Blocs soon), but I’ve also started using Hype4 frequently. Nonetheless, the only way to truly determine if a tool can assist with your everyday tasks is by using it and encountering any obstacles along the way. I will read the help files, but I prefer watching @Eldar’s videos as they are incredibly helpful and informative. Thanks!
thank you (again) @PeteSharp about your example
I just copy it and made it for a test and it works perfectly
I just tried on my side to make a menu with 3 titles (Animate on hover)
but one grid
I would like to make some logos appearing when I go on one of each titles
for example (based on your video):
animate on hover 1: logos apple stripe dji appears
animate on hover 2: logos wordpress, twitter, zoom appears
animate on hover3: apple stripe twitter wordpress appears
I thought that duplicating your code
and changing hover-text by hover-text1, .feature by .feature1 etc and keeping the logo-grid as it is
but indeed it doesn’t work 
if you have any clue
thx
For more complex situations and using JavaScript you can use data attributes on the icons.
If you thought about it as 3 sets, each icon could then belong to 1 or more sets.
Or you can use specific classes and the :not selector,
It would be cool if CSS could work with multiple values in a data attribute but it’s not possible. It would make it super easy though.
thank you @PeteSharp
i am not a pro in coding and I thought that my simple solution was the most simple to do: but doesn’t work
so I tried to understand those 2 pages:
https://help.blocsapp.com/knowledge-base/custom-data-attributes/
and also
https://help.blocsapp.com/knowledge-base/tabbed-content-bric/
according to it
if I follow your advice and based on your video:
.hover-text:hover + .logo-grid .feature {
transform: scale(1.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border-radius: ...
the .feature linked to the icon/image, will become the name of the data attribute of each icon I chose to reveal and not anymore the classe?
or do I add many classes as possible and each link reveals each one?
start to be pretty tricky
thx
There is lots of ways to do things, all based on what the outcome needs to be, determines your approach. If you copy a method that was more suitable for a different outcome, you can run into problems.
I’m not sure what you are saying here, but classes and data attributes are not the same thing.
I don’t really know what you want to achieve, but keeping it simple is usually the best approach.
sorry about my explanation
ok so to be more clear,
I own a company in Japan, which has 3 fields of application:
(photogrammetry 3D, narrative arts, consulting)
I already have tons of customers well known in Japan and international
so my point was to put ALL those logos references (companies which had contracts with my company) as you did super well with all the logos (dji, apple etc etc)
And 3 “Animate on hover” titles, instead of one as your example
when a visitor wants to see on which field i worked for which company:
for example when his mouse will go on the title “photogrammetry 3D”: all company logos that I worked with, on the field of photogrammetry will be animated and the others grey
and same for narrative arts title and consulting title
again what you did is great but limited to one Animate on hover title
making it by 3: i tried to keep as simple as possible
each title make animate some logos >>> But it doesn’t work at tall only with JS 
I attempted to explain this to @PeteSharp, but it seems that achieving this with Blocs is not straightforward. On the other hand, with Rapidweaver, it can be done with just one stack. I accomplished the same task using CSS, and he also followed a similar approach. Essentially, he uses Blocs as a mere shell to insert the code and achieve an outstanding final result. If you have a paid account with Anthtropic, they offer a ChatGPT-like tool that quickly generates usable code based on your explanations. I saw someone using it on YouTube, and I was truly impressed. It’s perfect for individuals who are not proficient in coding.
You have it working for 1 correct?
You can then just duplicate it for 3, using different names in the CSS.
eg. (You can use better naming that this)
.hover-text-one
.hovert-text-two
.hover-text-three
Then the icons…
.feature-one
.feature-two
.feature-three
I was using the :not pseudo class, to make the non-selected icons greyscale.
eg. This would applying styling when the text is hovered, to every icon that does not have the .feature-one class.
.hover-text-one:hover + .logo-grid img:not(.feature-one) {
// style goes here for icons not selected
}
1 Like
Effort gets rewarded @SENEK, if you get stuck, message me a project or a test project and I can help you. 
1 Like
thank you a lot @PeteSharp but I guess we are at 99% perfect
everything work PERFECTLY
right now the unique only tiny little problem I have 
the only text on hover which works is the one closest of the grid
I mean when I move the text “on hover TWO” close to the grid
the logos linked to this so feature-two work perfectly
BUT the text “on hover ONE” doesn’t bring any action on hover
so then when I move “on hover ONE” close to the grid
meaning the text “on hover TWO” is on the top
then the “on hover ONE” works but not the “on hover TWO”
on hover TWO
on hover ONE
don’t look too much on the UI
logos are weird and big
@AlbertKinng let me finish it and I will post how to do from zero to hero
2 Likes