Since we can’t currently copy sections from one website to another, I need some help.
I downloaded two of the pay-for templates in order to figure out how they made a couple of hover interactions.
This first one (https://webflow.com/design/meatncheese5?preview=62518a10ea33c0cacdd4c4db11289886) has a hover style built into the image overlay in the “Our Specialty” section. It appears to be nested somewhere along the way so I can’t see with interaction it uses. Can someone fill me in on how to make the hover (where the text and link popup and box goes dark) works?
I’m also trying to recreate the social media graphics for this template (https://webflow.com/design/meatncheese?preview=b8a939a85e6587eab5d7da2721087a30). I can’t find where they have set the background color for each different social media icon. The background colors on each overlay appear to be the same, but it has to be set somewhere to make it change to FB’s blue or Google’s red.
You should have asked before buying because this is a simple interaction. Look Example 5 on this page, it does the same thing (even more complex) http://interactions.webflow.com/
A for what’s happening in the template you bought, it’s made without an interaction. There’s a div called Image overlay, that contains the icon, the background and the text, that is set to opacity:0%. On this element, there is a :HOVER state set to opacity 100% with a transition ALL for 500ms. And it does the trick. I show you how to explore this here Google Chrome – Tapes
This hover trick works well but has limitations sometimes. For instance, to be able to catch the :hover event, this div is blocking all possible interactions with what’s underneath it. So if one day you need a more complex hover interaction, you may want to use Webflow interactions instead of the hover state trick, because you’ll need to make the element display:none, and then it won’t be able to catch a hover event.
For your second link, there is both a HOVER state and webflow interaction set on each column.
Vincent:
If I could trouble you for a little more guidance …
I created the hover interaction that you helped me with, but on some iPads it doesn’t work. (Sneak Preview elements on my home page: http://previewtulsa.com/). On phones and computers, when you “hover” over or click, the info shows. But on some iPads it won’t stay on the screen. I’m guessing I need to do an actual interaction to make it show. Can you explain how to pull that off? I still like the hover effect, but am guessing I need a “click” effect for iPads.
Hover does not exist on touch devices. You need to adjust your interaction for those so your information is not hidden. If your action is a link then doing a touch interaction will never be seen since it will be taking you to the target. If you have not done so, I recommend watching all the videos on the http://tutorials.webflow.com/ page. They will get you familiar with the basic things in webflow.
I’ve watched all the videos numerous times. All my elements are set up for “hover” and work on mobile devices except for this group in the Sneak Preview for some reason … and they work on some iPads which is the confusing part.
That doesn’t make any sense. There is no hover on touch devices therefore how can anything change? Touch devices can only respond to click link interactions. I am also not sure what element you are trying to fix and what behavior you want. By the way, if you haven’t figured it out. If you select any element and go to the style panel you will see right next to Selector it says states. Click that to select the other states and style that to however you want it to look on hover/click that is how you change the div background for your social icons on that template.