We use cookies to improve your experience on our website. AcceptView Policy

Hover Effects for Weebly Images

We made a tutorial on how to add this nice hover effects for the Weebly element way back on the old site, and decided upon request to add an updated tutorial for this again. So they're back, hope you like them.

The first thing we have to understand is that we will have 5 classes available in Weebly to play with, those classes of images are based upon the style you give to the image, those 5 styles are:

  • image Border None - class= .wsite-image-border-none
  • image Border Hairline - class= .wsite-image-border-hairline
  • image Border Thin - class= .wsite-image-border-thin
  • image Border Medium - class= .wsite-image-border-medium
  • image Border Thick - class= .wsite-image-border-thick


Please note that when applying later hover effects to one of those 'classes' it will be applied to all of the images on your site having that class, so if for example you would only want to have a hover effect on images that will contain a link, you might want to consider choosing a class out of the above 5 mentioned ones, just so you won't have an unwanted effects on images that don't require it, and I am sure you won't be using all five styles throughout your website, so you probably will be able to add more then one effect to your Weebly images.

Let's get some hovering done then.
Currently there are only 3 effects shown, we will be adding with time new styles on this page, you can if you feel like also combine effects.

DOWNLOAD STYLES:

Effect1: Hover with Opacity


Really easy to apply, a simple transition effect that makes your image more opaque on hover

Add the following codes to your CSS to get this effect:

.wsite-image-border-thin img{
  -webit-transition: opacity .7s ease;
  -moz-transition: opacity .7s ease;
  -ms-transition: opacity .7s ease;
  -o-transition: opacity .7s ease;
  transition: opacity .7s ease;
}

.wsite-image-border-thin img:hover{
  opacity: 0.5;
}
Note that we are giving a transition to the opacity property with an ease effect over a transition time of .7 seconds.

If you do care for making the opacity property cross browser for older versions, you can add the following code for the hover state as well:

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;

Effect 2: Scaling images


Make your image grow on hover

To get the following effect on your site, add the following to your CSS:

.wsite-image-border-thin img{
  -webit-transition: -webkit-transform .7s ease;
  -moz-transition: -moz-transform .7s ease;
  -ms-transition: -ms-transform .7s ease;
  -o-transition: -o-transform .7s ease;
  transition: transform .7s ease;
  -webkit-transform: scale(.9);
  -moz-transform: scale(.9);
  -ms-transform: scale(.9);
  -o-transform: scale(.9);
  transform: scale(.9);
}

.wsite-image-border-thin img:hover{
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}
Again we are adding the transition property we want to animate, this time it is the transform, we applied a transformation to the original image and scaled it down to .9 of its original size, and when hovering over it, it will grow back to its original size.
The reason why we scale down the original image and only let it scale up to its original size is to maintain the quality of the image uploaded.

Rotating Images


Let those images spin

If this effect is desired then add the following codes below to your CSS:

.wsite-image-border-thin img{
  -webit-transition: -webkit-transform .7s ease;
  -moz-transition: -moz-transform .7s ease;
  -ms-transition: -ms-transform .7s ease;
  -o-transition: -o-transform .7s ease;
  transition: transform .7s ease;
}

.wsite-image-border-thin img:hover{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}
Again we are animating the transform to the transition effect and again with a speed of .7s and a smooth ease effect.
close X
start with weebly