-
Posts
-
I have a simple column with an image and some corresponding text below the image. Is it possible in enfold to create an underline hover effect on the text when the mouse hovers over the linked image (or i could make the whole column a link if that’s easier)?
I would also like to achieve the same effect with the title of the portfolio grid entries becoming underlined when hovering over the corresponding featured image?
Any advice would be greatly appreciated.
Hey Birdster,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi Victoria,
Apologies for the late reply, but there wasn’t a website until now! I’m still putting together costs and trying to win the work, and therefore need to know how much of the project will involve a freelance developer and how much i can achieve myself within enfold.
Anyway, i’ve spent the last couple of days mocking up the homepage on a sub domain, and some login details have been sent to you privately.
So, the idea was when the mouse hovers over the linked images on the page, the text below the image would become underlined. Please let me know if this is something that can be coded within the framework of enfold?
Having now designed the homepage, I am keen to show it to the client to increase my chances of winning the work. However I have since come across a few other issues i am now struggling with:
1.) Can i make the left margin/padding of the header image fully responsive, so that it moves in line with the text below. At the moment it does not slide left as fast as the other on screen elements?
2.) I have used the new widget page feature in enfold which is awesome, however the icon box seems to break on smaller screens – so that the icon jumps above the text – despite there being plenty of room to the left. I can’t work out what i am missing?
3.) The socket is causing major issues on smaller screens – where the social icons, footer menu and copyright info all overlap one another. Ideally i would want the social icons to be on top, with the footer menu becoming central and below the social icons, whilst the copyright icon stays right aligned and below everything else. Any ideas on how best to approach this issue?
4.) Finally, is there an option to remove the column breaking point on mobiles, so that 1/2 columns stay half screen size instead of jumping to full screen?
Sorry for bombarding you with all these questions, please let me know if you would prefer I set them up as individual forum questions?
Thanks again for the great theme and support,
Hi,
Great looking site.
Thank you for elaborating the issue, Please check the below links it should help you create clickable columns.
https://kriesi.at/support/topic/apply-link-to-column-box/#post-470152
Kindly request you to create different tickets for different issues so we can keep the tickets related to the topic which will also help others.
1. It is not clear which image you are referring to please clarify.
2. I cannot find icons on the site please link to the exact page.
3. To adjust the footer please try the below code.The background color in the code is for visual reference only you can remove it.
@media only screen and (max-width:1330px) { #top #socket .container { display:flex; background: red; flex-basis: 100%; position: relative; flex-wrap: wrap; justify-content: center; } #top #socket .copyright { background:gold; flex-basis: 100%; position: relative; margin:0; order: 3; } #top #socket .social_bookmarks { border: orange 2px solid; flex-basis: 100%; position: relative; float: none!important; order: 1; margin:0 !important; left: auto; } #top #socket nav.sub_menu_socket { background: lightgreen; flex-basis: 100%; position: relative; margin:10px 0; order: 2; }}4. Please refer to the columns section in our documentation and customization guide
Best regards,
VinayThanks Vinay,
Glad you like the site – it’s certainly different, as the client actively is trying to avoid template layouts, which isn’t making my life easy!
Anyway, your socket code was really helpful. It’s not quite the horizontal alignment i was after, but i’ll try to adjust it myself.
As for your other comments, I had already read through the enfold documentation on columns, but it doesn’t answer what i am after. I will open new threads for my questions 2 and 4, as suggested, but will try and clarify my original question 1 to continue this thread:
In answer to your question, it is all the images on the homepage with a text box directly below them.
I was hoping to have the text box become underlined when hovering over the image.Any thoughts would be appreciated…
Hi,
To make the text below the images on the homepage become underlined on mouse-over, please try this css:#top.home .flex_column:hover h6,#top.home article.inner-entry:hover > .grid-content h3 { text-decoration: underline !important; }Please clear your browser cache and check.
Best regards,
MikeAmazing – works a treat. Thanks mike.
It even works for the portfolio grid, which is great. However now i need to get to work for all portfolio grids on other pages for continuity – so removed the .home for the time being. If i need to make the code more specific to individual columns, is it possible to add a custom class into the mix somewhere?
Hi,
Glad to hear, you can add a custom class to the column and css like this:.flex_column.customclass:hoverbut it should work as is, I added the page ID out of habit.
Is there is anything else we can help with on this issue, or shall we close this thread?Best regards,
Mike
- The topic ‘hover interaction between elements’ is closed to new replies.