0

I am currently working in Wordpress usnig the Visual Composer. I wish to make an image simply change on mouseover for now. I have read many different ways of doing this with Java and CSS but nothing seems to be specifically for this.

Many thanks!

A. Matulewicz
  • 25
  • 3
  • 8

3 Answers3

1

Working example checks it , replace images with your own.

 <a class="foo" href="#">
     <img src="http://lorempixel.com/400/200/food/1/" />
     <img src="http://lorempixel.com/400/200/food/2/" />
 </a>

 <style>
    .foo img:last-child{display:none}
    .foo:hover img:first-child{display:none}
    .foo:hover img:last-child{display:inline-block}
 </style>

http://jsfiddle.net/gd8ba/light/

Thanks
R.K.Bhardwaj
  • 2,168
  • 1
  • 14
  • 24
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/13719971) – jwenting Sep 19 '16 at 10:58
  • sorry for mistake..! – R.K.Bhardwaj Sep 19 '16 at 11:18
0

Say, I have a link - 

<a class="my-link" href="http://www.my-website.com"></a>

I need to show an image on mouse over this link. So, I will add two things in my CSS-

  1. To add image to the link

    .ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;}

  2. To add hovering property

    .ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;}
Techidiot
  • 1,921
  • 1
  • 15
  • 28
  • Thank you. So, where exactly should I place this? Sorry, I have a lot to learn. Within Visual Composer I can place CSS per page for certain elements. Otherwise, should this go somewhere within my style sheet? – A. Matulewicz Sep 19 '16 at 10:52
  • It can go to the pages where you need to use this property. https://en.support.wordpress.com/custom-design/editing-css/. Also, accept this as answer if it helped :) – Techidiot Sep 19 '16 at 10:54
0

I know this post is old, but recently I had the same inquiry, so I found this plugin https://es.wordpress.org/plugins/image-over-image-vc-extension/. I've tested it with WPBakery on WP 5.6.3 and it works fine.

Here are the demos. Hope it works for anyone needing this functionality.

Mr. Bacan
  • 109
  • 1
  • 2
  • 9