You can enlarge an image on hover by increasing it’s scale with the transform property. Transform isn’t currently supported with GUI fields, but you can enter it manually. To animate the enlargement process, I recommend using MTs transition fields. The following video shows how to do this: http://somup.com/cFenobVzse
The filter CSS property also isn’t supported via the GUI yet. But you can enter this via the custom code property group. The trick to making filter work in Chrome and Safari (at the time of writing) is adding the -webkit- prefixed rule before the regular filter rule.
If you an send me a link to the page with the UABB icon, I can advise you more specifically. But it looks like it works in the same way as font-awesome. The image is actually a font, applied using a ::before pseudo element. You can target ::before elements in Microthemer by using the CSS modifier facility to the right of the selector label (like I demonstrated in the greyscale video above, but choose the ::before option on the right instead of the :hover option).
Then, to change the color of the icon, you just set the color via MT’s Font styling options.
Cheers,
Sebastian
P.S. you initially mentioned an issue with using the plus [+] icon shown in the above videos. Did you manage to resolve that? If not I would be happy to troubleshoot if you can send access details for your site via our secure contact form.
Thanks Sebastian. The issue with the plus symbol is fine now, thanks – it was just taking a while to load I think.
Here is a link to the page with the UABB Icon Box modules – https://thestonesource.co.za/ (you’ll see them in the ‘STONE WALLS & FLOORS’ section of the page)
I am using images instead of icons in those modules, but I think the way it does it is to set the images as background images.
Looking at your site with Chrome’s inspector, it seems the image is being rendered as a regular HTML image rather than a CSS background image:
From analysing the code, I can’t immediately tell why you would have trouble selecting the image in Microthemer. I can troubleshoot this if you don’t mind sending access details? However, I can also offer some general advice about targeting elements via alternative methods if the usual mouse-click targeting doesn’t work well for some reason.
In targeting mode, click the show advanced link. This will display a HTML pane on the left similar to Chrome’s in the image above. Click on the img element, or on a nearby element that you can select. Then look for the HTML code for the img as highlighted in blue in the image above. Click that HTML in Microthemer’s HTML inspector pane to select the image. You can also use the breadcrumbs below the HTML as an alternative way to adjust targeting. Finally, the directional controls to the left of the selector label provide another means of shifting targeting to adjacent elements.
As I said, I can troubleshoot your install if the above info isn’t useful.
I managed to select the image, but I just can get the hover scaling effect to work. I’ve tried loads of different selectors and selector combinations and I’m stumped!
I sent you some login details for the site. Thank you so much for your willingness help!
Thanks for providing access. This was an interesting challenge. I see exactly why you had difficulty with the issue. It presented two problems at the same time.
Problem 1. Selecting the image with Microthemer in the usual way wasn’t possible because a nearby link element has absolute positioning, and covers the whole content area that has the image. So whenever you tried to click the image in Microthemer, you landed on the link element that is layered over the top of the image.
To select the image, I needed to find it via Microthemer’s HTML inspector (available with the advanced targeting options enabled). I then chose the suggestion on the right that targets 4 elements on the page.
Finally, I set the transition property to transform via MTs transition fields, with a 1 second duration.
Problem 2. Because the link element is layered over the top of the image, the image will not respond to hover events. Only the link will respond to hover events. And so in order to trigger hover behaviour on the image, we needed an advanced (custom) selector that tapped into the link’s hover state:
.uabb-infobox-module-link:hover + div img
The + symbol in a selector can be used to select an element that is the sibling of another element. The link element is the sibling of a div element in your case. And the div element is the parent of each image. And so using this type of selector we can apply new styles to the images when the user hovers their mouse over the link.
I then set the following styles on the custom selector via Microthemer’s inline code editor:
(I included the -webkit- prefix for maximum browser compatibility)
Now your images scale on hover. You can tweak the timing and the scale amount (1.1) yourself.
—
One more thing, I noticed you had the Styles tab open in the advanced targeting options. But a warning says the tab slows the browser by over 6 seconds. This means your theme loads a bit too much CSS to use that feature frequently. I recommend leaving that tab off unless you really need it. Otherwise it will slow your MT targeting by 6 seconds every time you target a new element.
You can right-click > Inspect in your browser to get the same Styles functionality, with the added computing power your browser can draw upon, making it much faster.
I hope that helps. Please let me know if you have any further questions.
One of the things I am loving the most about Microthemer, besides the massive amount of time it saves me, is that it teaches me things about CSS that I don’t know. That is really valuable.
I’ve been coding CSS for a long time and using things like Firebug so I managed to find the right selector in the HTML view, but I would never have figured out the link thing so that you so much for your help and for teaching me something new! I am super appreciative of your time and your knowledge!
.
