Home / Forums / You Theme Support / How to make a "hover-over" effect where image 1 changes to image 2 upon hover?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts

  • BramFrankel
    Participant

    How to make a “hover-over” effect where image 1 changes to image 2 upon hover?
    Thanks!

    Hi @bramfrankel

    This is possible but this will require a lot of custom coding which we do not support.

    Thanks!


    BramFrankel
    Participant

    Hey @Edcel,

    Can you please indicate 1) which specific element (within one of the demo pages that I uploaded in my WordPress dashboard – and where I’m trying to create my site) would be the best element to customize with this coding? I assume it’s one of the image effects elements in one of the gallery or grid elements. I assume the coding would simply replace the current hover effect which currently simply converts to text upon hover; and 2) a few YouTheme WP developers that could accomplish the actual coding for me, thanks!

    Kind regards,
    Bram

    Hi @bramfrankel

    It is best to coordinate with a developer to ask if it’s best to create a new element/custom code or if it’s easier to work with current element.

    You can coordinate with a developer at https://market.envato.com/

    Thanks!


    heli
    Participant

    hi Bram, Edcel

    Sorry to butt in (I was looking for the solution to a different problem) but one way to achieve the image change on hover without coding would be to use Visual Composers Grid Builder Templates.

    1. Select Grid Builder from the Visual Composer Sub-Menu.
    2.Choose “Add New” from the menu
    3. Choose “double Block No Animation” from the drop down menu on the right-hand side
    4. Add a background image to the Normal and Hover main settings (big pencil symbol at the top of each of the blocks)

    The only downside would be that you’d need to create a new grid template for each of the images/hovers you wanted to create but on the plus side you could also have different information on the normal and hover states too.

    Hope that’s helpful!

    best wishes

    Heli

    Thanks for the information @heli

    That is indeed a possible solution, but as you mentioned, the drawback would be you will need to create a new grid template for each image-hover effect.

    Regards,


    BramFrankel
    Participant

    Thanks, @heli! However, please help as it’s not working:

    * I followed the instructions exactly as you listed, but the element doesn’t work.
    * Even in the editing mode when creating it, it doesn’t work, ie., upon hover in “preview mode,” neither image is visible, and nothing happens upon hover.

    Perhaps there are some settings in the edit-mode that need to be changed/edited?

    I’m desperately trying to get the site finished and live, can you please help me?

    If you can please reply as soon as possible, it would be greatly appreciated.

    Thanks so much for your generous help with this.

    Kind regards,
    Bram


    heli
    Participant

    Hi Bram,

    I’m happy to take a look at it if you want to send me your login (perhaps as a private post?) but I have to admit that though my method worked perfectly in the Grid Template section of VC, when I came to adding it to a page on my site it didn’t work as I’d forgotten that the only way to add the Grid Template was to create a grid and for that to work you need to add an image to the actual grid gallery too!

    It took me about an hour of trial and error but I think I’ve got it now. The only thing I’d say though is that it’s a bit of a round the houses way of doing things as you will need to create a seperate VC grid template for each image you want to swap and also you’ll need to add a different grid gallery on your page for each image too.

    From a time point of view (your time) it might be easier for you to add a seperate class to each of the images you want the hover effect for and defining a hover state for each of the classes as well.

    However, if you want to to try using the VC grid then I am happy to give it a go (no promises but I’ll do my best).

    best wishes

    Heli


    BramFrankel
    Participant

    Hey @heli,

    It worked! Apparently, I had edited a field mistakenly before….But I did just as you said, and it works!

    Thank you so much! It’s very nice to get help from someone who just wants to be helpful…I very much appreciate it!

    Kind regards,
    Bram


    heli
    Participant

    Hi Bram

    I’m so pleased it worked for you! I’ve had so much help from Andy & Edcel over the years that I’m happy to give a bit back if I can.

    I’ve got to ask though, how did you get the grid onto the page once you’d created it in the VC Grid builder? I did it by adding a media image grid to display one picture and then added the same picture I’d used as the “normal’ state on the grid template to the media grid as the grid wouldn’t display with no image selected for it. I had trialled adding a transparent png to the grid but that just gave me a blank space that changed to the hover image when I hovered over it. I’m sure that there must be a simpler way but I couldn’t work it out (mind you it was very late when I was trialling my method last night!)

    best wishes

    Heli


    BramFrankel
    Participant

    Hey @heli,

    Sure, here you go:

    After building (and saving) the new Grid Template in VC:

    1. Add a “Post Grid” element (I think it will work the same with a Media Grid as well)
    2. Edit the element
    3. From the Edit window:
    3.1. General Tab > Total Items: Change to 1 (it will display multiple copies of the same image if you put more than 1)
    3.2. General Tab > Grid Elements Per Row: leave or change as needed (I changed to 2)
    3.3. Item Design Tab > Grid Element Template: Select the name of the new Grid Template you created in VC

    I didn’t edit any other fields in the Edit window. Note: I did not add any images at all in the Edit window. The only images I added were in the actual element when I created the Grid Template.

    I’m having a bit of difficulty creating a layout where the Post Grid element (with the hover-image) is on 1/2 of the page, and then creating a text block element on the other 1/2, so the two are side-by-side….Do you have any advice as to how to create this layout using rows and columns? It’s taking a lot of trial and error and time trying to figure it out…

    Hope this helps! Please let me know if you have any guidance for the layout question, thanks…

    Kind regards,
    Bram


    heli
    Participant

    Hi Bram,

    Thanks for letting me know. I wonder if it didn’t work for me without the image because I was using the Media Grid rather than the Post Grid. I’ll give it a try later on and see.

    Re the layout problem. You’ve probably already tried it but the way I would do it would be to add a one column row to the page and then add another row inside that but change the columns on the inner row to 1/2 and 1/2.

    From within the row settings dialogue box there’s the option to make the two columns equal height. You can then add your Post Grid element on one side of the page and add a text block on the other column.

    Hope that helps

    Heli


    BramFrankel
    Participant

    Hey @heli,

    Thanks, that worked! However, how do you reduce the size of both the image and the text block, so that they are centered, and most importantly, don’t take up the whole space of the row? I’d like the image on the Post Grid to be smaller and centered, and the Text in the Text Block to be centered also…

    Thanks,
    Bram

    Glad to know you got it all sorted out, Bram, and thanks for the help @heli. We appreciate that.

    Regards,


    heli
    Participant

    Hi Bram,

    Tricky to say without taking a look at the layout of your page but off the top of my head I’d suggest that you check that your first row setting (the one column row) is set to default rather than “stretch row” or “stretch row and content’. That should keep the row width to the width of your site rather than stretching it to the whole width of the screen.

    If that’s still too wide for you then instead of having the first row set to one column, then try changing the column layout to either 1/4 – 1/2 – 1/4 or 1/4 – 4/6 – 1/4 and put your second row inside of the largest section – this will give you a bit of a gap on either side of your content.

    You should be able to centre the text in the Text block by using the “centre” justify option from the text block dialogue box. If that’s not what you mean (I.e you want to text block to be centred in the column) then perhaps adding some padding on either side of the text block or column would do the trick? That would probably work for centering the media grid as well. You can change the padding from within the inner column settings (pencil icon at the top of each column).

    Hope that helps

    Heli

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.