Hi can anyone advise the easiest way to create an image that fades on hover in Yola?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I would like turn an image into one that fades with mouse hover. Can anyone tell me the easiest way to do this on my Yola website? Thank you 
Photo of Kirsty McQuoid

Kirsty McQuoid

  • 7 Posts
  • 0 Reply Likes

Posted 3 years ago

  • 1
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Photo of Kirsty McQuoid

Kirsty McQuoid

  • 7 Posts
  • 0 Reply Likes
Hi Peter, 

Many Thanks for this.

Kirsty
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Kirsty,

This may help:

The CSS style sheet:

<style>
.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }
</style>


Your image related HTML:

<img src="resources/image.jpg" alt="" width="xxx" height="yyy" class="fade" />

The style sheet can either be placed into an HTML widget somewhere on your page or it can be added to your CSS over-rides which will enable the function to be applied sitewide. If added as a CSS over-ride then remove the <style> and the </style) statements, retaining the CSS code inbetween.


The opacity values of the CSS can be varied according to your preferences. (Between 0 and 1)

The transition numbers are the times that it takes (in seconds) for fade out/in and can be varied

The image specific HTML is placed on your page within an HTML widget at the place you wish your image to display. The width (xxx) and height (yyy) values depend on your image proportions and the final size you wish to display your image.

The folder and image names are purely examples.
(Edited)
Photo of Kirsty McQuoid

Kirsty McQuoid

  • 7 Posts
  • 0 Reply Likes
Many Thanks!

Kirsty