I have 3 columns in my global area. The first is the company logo. The second is a logo brand. The third is the contact info.
The image logos are SVG. I need the middle column logo change to a different logo when the mouse hovers over the image.
The option for using SVG was not available. I could use some help.
I just check the project in RWD checker and the Branded Logo is not visible. Why?
Hello @KBConcepts can you send me both logos?
And do they have to be SVG or can be converted to a different format?
Okay 
I’m looking forward to finding out why the middle image is not visible. I appreciate you looking into this for me.
Just curious is it okay to use SVG in the global areas?
HomeAdvisor.zip (33.2 KB)
What are the logos that you want to be exchanged with Hoover action?
1 Column 2 A2M-Contractors_.svg to Hover to A2M-Contractors_Inverted.svg
2 Column home-advisor-five-star-rating.svg to Hover to homeadvisor-logo-vector.svg
HomeAdvisor2.zip (27.7 KB)
Hello @KBConcepts
There is a workaround… I can try to explain it, but first check if is this you want:
https://blocs.webtekpc.pt/exemples/kblogo/
1 Like
The problem with the central logo is because you have your SVG files in different sizes and with a lot go margins.
Nice work my friend.
Yes, it is the second line that I’m looking to make.
Just to be clear, you’re saying the svg sizes are different between the Normal and the Hover images?
Open the Home advisor files in google chrome, and you will see what I mean…
All the same size. Good eye my friend. I should have known that. For some reason, I thought Custom Class would fix that.
Se if I rebuild this in Blocs 3 the Logos will be visible?
163 X 200 px SVG.zip (139.7 KB)
So the second line:
-
- I open the SVG files in GIMP and remove the white alpha (make transparence in the file) and export it to png with transparency.
-
- Then tried to resize all the images for the same size and only with the logo without margins in the files.
-
- For each logo group I create a no content image only with transparency. (we see it later)
There is the files I created: Images.zip (111.3 KB)
-
- Now lets work in blocs:
-
Add a Structure 3 Column bloc:
-
First bloc - Add a image bric:
-
In the image add the Logo 0 (full transparency):
-
Change the With to 70 and align it to the left:
-
And now you ask. Where is the logo??? There we go:
Add a class to the image like “logodemo-hoover” and open the customization of that class:
-
Now in the Normal State:
Add first state image
Change With to 70 (same as first image)
Change Position to “Center Center”
Change Repeat to “No Repeat”
Change Clip to “Content Box”
-
Now in the :hoover State:
Add second state image
Change With to 70 (same as first image)
Change Position to “Center Center”
Change Repeat to “No Repeat”
Change Clip to “Content Box”
And that’s it… then on the second column repeat all the steps that you use to create the first column except the alignment of the main image leave it centered.
About the last column, add a Navigation Bric:
Then deselect “Include Logo” and then click on the left to the column that this bric depend and align it to the center:
Then click on the Bloc at the left side, and just remove or leave 20 px of bloc padding and adjust the With and add sticky option if you like:
Hope that this help you…
And you know what is the first Time THERE IS NO CODE::::::::))))))))
1 Like
Nice work my friend, especially because you did it all in Blocs 3!
Is there a reason why these could not be SVG?
For two main reasons,
-
To make the SVG hoover I have to manually insert the files after export as there is no way to add the svg images to the class. Probably something that @Norm can fix…
-
I could do that with object code, but then I found this table:
Wow! I can’t believe you found that! Doesn’t it seem strange that you can’t use SVG in the Global area?
Thanks for all the time you put into the project for me. 