Change image size on hover

You can achieve it with css and bypass javascript completely.

This would go in your css file:

.effectback {
  display: block;
  background: url('/wp-content/uploads/2015/07/logo_egatex_150.jpg') no-repeat;
    margin: 0 auto;
}

.effectfront {
  opacity: 0;
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  opacity: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

And this would go in the main body area of the coding:

<div class="effectback">
<img class="effectfront" src="/wp-content/uploads/2015/07/500-1.jpg" />
</div>

source:
https://stackoverflow.com/questions/18456169/show-enlarged-picture-when-mouse-hover-over-an-image

Thank you llizard !

I put the css in my css file, then went to my page where the html is and addes the code to it. It isn’t working..

I put it before the <p>, between <p> and in the middle of the code, nothing helped ??

It just messed with my layout..

That’s too bad! Try this:

<p class="effectback">
<img class="effectfront aligncenter" alt="brief description of image" src="/wp-content/uploads/2015/07/500-1.jpg" />
</p>

I hope that works!

edit: note that this coding is to replace the coding that you had. There is no need for any javascripting with this.

OH, oops …

I pasted it together with the original coding, this is fine and so was the first one.
Thank you SO much !

Happy weekend !
Nicky

That’s great, Nicky. I’m really glad it works for you.

(Don’t forget to say this topic has been resolved. ?? )