Simple Transparent Image Mouseover

  • 4
  • Idea
  • Updated 7 years ago
  • Implemented
Here's a simple transparent image mouseover code without the need for two images, just place the code below without the <!-- --> into a html or text widget (click html on the toolbar) and insert your image name, alter the opacity values to suit, lower is more opaque.
You can also link away from it in the normal way.

<!--
<style type="text/css">
img
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
img:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>

<img src="resources/your image.jpg" alt="">
-->
Photo of David

David

  • 465 Posts
  • 94 Reply Likes

Posted 7 years ago

  • 4
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Hi David,

Thanks for sharing this! I am sure a number of Yola users will benefit from something like this.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
I've only just discovered that the code above was affecting all my images on the page instead of just the ones I wanted it to so if you like it please use the updated version below which also has the link.

<!--
<style type="text/css">
.image1
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.image1:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>

<a href="your link url"><img src="resources/your image.jpg" class="image1" alt="">
-->
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi David. This is a great little feature so thanks for putting it out here for others to use and enjoy I can say.