Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • February 15, 2015 at 1:33 pm #396372
    iclo

    On my home page, I’d like to create a 6 images menu (2 columns x 3 rows). I’d like each row occupy 100% width. I’d like each images to have a title and a full image link. Finally I’d like to get a hover fade effect.
    In fact, I’m trying to create the same type of menu found on this page:
    http://www.sidetracked.com

    What would be the best solution to get this result?

    – I tried with images in 1/2 elements. Links and hover effects are perfect. But the images are not full width.
    – I tried with a grid row (images as background). Images position is perfect (100% width). But I can only insert a button. No link. No hover effect.

    Many thanks!

    • This topic was modified 9 years, 10 months ago by iclo.
    February 16, 2015 at 12:35 pm #396646
    Yigit

    Hey iclo!

    Please use megamenu. For more information, please see – http://kriesi.at/documentation/enfold/portfolio-item/creating-a-mega-menu/

    Cheers!
    Yigit

    February 16, 2015 at 12:55 pm #396659
    iclo

    There’s a misunderstanding. I didn’t mean menu as in top menu header. I should have written ‘section’. Please have a look at the links I sent you earlier for a better understanding ;)

    • This reply was modified 9 years, 10 months ago by iclo.
    February 16, 2015 at 7:07 pm #396948
    Ismael

    Hi!

    Use the Grid Row element, add a unique id attribute (For Developers: Section ID). Use “custom-grid” for example. Inside the cells, add image elements with links. Add this to the Quick CSS field to remove the cell padding:

    #custom-grid .flex_cell {
padding: 0;
}

    Cheers!
    Ismael

    February 16, 2015 at 7:57 pm #397001
    iclo

    Awesome!

    Actually I tried with and without Quick CSS and it seems that it doesn’t make any difference… Should I leave it or not?

    Btw to make it perfect, I’d like to have all this mobile friendly :-) (at the moment, as soon as one click on the image it opens the page without showing the caption)

    • This reply was modified 9 years, 10 months ago by iclo.
    February 16, 2015 at 11:05 pm #397152
    iclo

    Also is there any possibility to adjust the grid height as we can adjust the color section height (100%)?

    February 17, 2015 at 12:28 pm #397409
    Ismael

    Hi!

    Unfortunately, hover state won’t work on mobile. Try to show the caption even before clicking the image:

    @media only screen and (max-width: 767px) {
.av-overlay-on-hover .av-image-caption-overlay {
opacity: 1;
}}

    2.) Apply unique id attribute to the grid row element. Use css to adjust the height.

    Best regards,
    Ismael

    February 17, 2015 at 3:18 pm #397537
    iclo

    1) It will do. Many thanks Ismael!

    2) I’m not CSS friendly enough to even understand that lol

    February 17, 2015 at 3:35 pm #397549
    Yigit

    Hey!

    2- Please edit your Grid Row element and give it an unique ID – http://i.imgur.com/ByTsQy9.png :)

    Cheers!
    Yigit

    February 17, 2015 at 3:47 pm #397554
    iclo

    2) I have 3 Grid Row. I gave them these unique ID : destinations-1, destinations-2, destinations-3.
    What’s next?

    3) Also, would it be possible to have all this hover effect applied to the Masonry element?

    February 17, 2015 at 3:48 pm #397555
    iclo
    This reply has been marked as private.
    February 18, 2015 at 12:02 pm #398033
    Ismael

    Hi!

    1.) Use the id to change the height. Add something like this to the Quick CSS field:

    #destinations-1 {
height: 500px;
}

#destinations-2 {
height: 600px;
}

#destinations-3 {
height: 700px;
}

    You might need to add css media queries to adjust the height for smaller screens.

    2.) Unfortunately, that will require custom modification where we can’t help you with. Your best shot is to hire a freelance developer.

    Best regards,
    Ismael

    March 2, 2015 at 10:21 pm #404809
    iclo

    Hi there,

    My reply is about Ismael’s message posted here on Feb 17.

    On this website http://www.sidetracked.com hover state works perfectly on mobile. So what would be the solution for me to have the same effect?
    Also I added the Quick CSS as requested. It works fine on an iPhone but doesn’t work on an iPad. Any clue?

    Merci :)

    March 4, 2015 at 6:50 am #405572
    Ismael

    Hey!

    That is a custom jquery script. Unfortunately, we can’t provide any of that code here. Maybe, you should contact the website developer or owner. Or hire a freelance developer for a more extensive custom hover effect. :)

    Best regards,
    Ismael

    March 4, 2015 at 11:04 am #405684
    iclo

    OK :)

    But before that I’d like to see on an iPad the results I got on an iPhone with your Quick CSS. As I mentioned before this Quick CSS works fine on an iPhone but doesn’t work on an iPad. Any clue?

    Merci :)

    March 6, 2015 at 7:28 am #406832
    Ismael

    Hi!

    Replace the code with this one:

    @media only screen and (max-width: 1024px) {
.av-overlay-on-hover .av-image-caption-overlay {
opacity: 1;
}}

    Cheers!
    Ismael

    March 6, 2015 at 3:36 pm #407013
    iclo

    Awesome! Merci Ismael :)

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Full Width Images Menu With Link and Hover Effect’ is closed to new replies.