Support » Theme: Virtue » change picture on hover for icon menu?

  • Resolved SMukta

    (@smukta)


    I would like to change picture on hover in the homepage icon menu. Can you please help me with custom css for this?
    Thank you!!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • This isn’t really possible like you would think… I supposed I could come up with css that could do something like this.. you would need the image to be the same size is your current image.

    You would have to post a link to your site and you will have to post a link to the image you are wanting to switch on hover.

    Are you wanting to do this for one image or all?

    Kadence Themes

    Thread Starter SMukta

    (@smukta)

    Thank you for your reply! What an amazing support!
    my website is: http://bhaktivedantaashram.org/
    I would like to add a hover picture to all the icons. For example, for the second icon (Newsletter) the hover picture would be: http://bhaktivedantaashram.org/wp-content/uploads/2015/01/Bewsletter-brown.png
    many thanks again!

    Your site is in Maintenance mode? You would have to turn if off.

    Kadence Themes

    Thread Starter SMukta

    (@smukta)

    Oh! I thought I turned it off. sorry for that. now it is surely off.

    Thread Starter SMukta

    (@smukta)

    If you visit my site, I will be very grateful if you can also advise me how to reduce the space between the portfolio carousel to the page content below it.
    Many thanks!

    Ok, so css for what your wanting. This will only apply to the second icon, hopefully you can duplicate from there?

    .homeitemcount2 a:after {
        content: url('http://bhaktivedantaashram.org/wp-content/uploads/2015/01/Bewsletter-brown.png');
        z-index: 1000;
        position: absolute;
        top: 0;
        left: 15px;
        transition: all .3s ease-out;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        opacity: 0;
    }
    .homeitemcount2:hover a:after {
        opacity: 1;
    }
    .homeitemcount2 a img {
       opacity: 1;
       transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    }
    .homeitemcount2:hover a img {
       opacity: 0;
    }

    as for the portfolio try this:

    .home-portfolio {
    padding-bottom: 0;
    }

    Kadence Themes

    Thread Starter SMukta

    (@smukta)

    Kadence themes, you rock! Thank you so much! it worked! I just had to re-work the element size in the image because the original icon images were re-sized a bit to fit 5 icons in a row. Otherwise it just worked!
    Thanks a million!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘change picture on hover for icon menu?’ is closed to new replies.