In our previous article we saw how to create image overlays on hovering and in this article we will checkout how to create simple image hovering effects for your Weebly site. CSS properties transition, transform, filtering and opacity are used to create hovering effect for the images on Weebly site. You can either copy / paste the complete widget code inside “Embed Code” element or add the CSS style under “Header Code” section and the HTML code inside “Embed Code” element on the page.
CSS Image Hovering Effects for Weebly
There are 11 different effects to control – zoom out, zoom in, enlarge, shrink, saturate, contrast, brightness, grayscale, blur, invert colors and opacity. The complete CSS and HTML code along with demo for each style is shown below.
- Ensure to replace the Image-URL with your own image URL. You can either upload images under “Assets” section or use URLs from different pages on your Weebly site or use URLs from other site.
- You can change the values of scale, grayscale, brightness, contrast, etc. with your own values. For example, “-webkit-filter: brightness(0.25);” will reduce the brightness to 25% which you can change to “-webkit-filter: brightness(1.25);” to increase the brightness to 125%.
- Filter property is not supported in Internet Explorer.
Here is a complete code for the each type of image hovering effect. You can view the preview by hovering mouse on the image.
1. Zoom In Image on Hovering
<style>
.cont1 {
overflow:hidden;
}
.cont1:hover .image1 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image1 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont1">
<img class="image1" src="Image-URL">
</div>
2. Zoom Out Image on Hovering
<style>
.cont2 {
overflow:hidden;
}
.cont2:hover .image2 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont2">
<img class="image2" src="Image-URL">
</div>3. Enlarge Size of Image on Hovering
<style>
.image3 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<img class="image3" src="Image-URL">4. Shrink Image Size on Hovering
<style>
.image4 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}
</style>
<img class="image4" src="Image-URL">5. Change Saturation of Image Colors on Hover
<style>
.image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image5:hover {
-webkit-filter: saturate(4);
}
</style>
<img class="image5" src="Image-URL">6. Convert Image to Grayscale on Hover
<style>
.image6 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image6:hover {
-webkit-filter: grayscale(100%);
}
</style>
<img class="image6" src="Image-URL">7. Change Contrast on Image Hover
<style>
.image7 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image7:hover {
-webkit-filter: contrast(160%);
}
</style>
<img class="image7" src="Image-URL">8. Change Brightness on Image Hover
<style>
.image8 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image8:hover {
-webkit-filter: brightness(0.25);
}
</style>
<img class="image8" src="Image-URL">9. Change Blur of Image on Hover
<style>
.image9 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image9:hover {
-webkit-filter: blur(5px);
}
</style>
<img class="image9" src="Image-URL">10. Invert Image Colors on Hover
<style>
.image10 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image10:hover {
-webkit-filter: invert(100%);
}
</style>
<img class="image10" src="Image-URL">11. Change Opacity Colors on Hover
<style>
.image11 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image11:hover {
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<img class="image11" src="Image-URL">Since all these effects are created with generic CSS, you can use these codes on any HTML page. For example, this is a WordPress site and we have used the “Custom HTML” block to showcase all CSS image overlay effects.
Hi,
So, I am working on a website for National History Day, I want to do the effect where the image enlarges for the gallery on one of my pages. I tried to do it with the code you provided… I am not really sure on how to do the URL for the image since it is multiple images. I am only a beginner at this type of stuff. I have tried multiple times to do it and it will not work, it pops up with a little image icon like something that hasn’t been loaded. Please help as soon as possible. I would really like to add some extra elements to make my website stand out to the judges. Thanks.
“Zoom in image on hovering” code is wrong. This is for “Zoom out”.
Thanks, zoom in and out and swapped in the article now.
Hi – This is exactly what I was looking for for my site! I’m using the code to enlarge the image of an icon, but when I do so, the image become blurry/grainy. Is there anything I can add to maintain the resolution of the image?
Don’t use CSS to enlarge or shrink the image sizes, this will slow down the page. Directly use the image with correct size required for you.
This works great, except that it’s not dynamic and image size does not adjust, especially when viewed on mobile devices. Is there a way to make that happen?
Image size should automatically adjust based on the viewport On Weebly responsive themes. You can also use CSS media query for mobile devices to show same of different effect on smaller devices.
But remember hovering effects are not meant for mobile devices.
Hi can I get more help with linking? I’ve tried the instructions and it doesn’t have the effect after I add the link. Something’s not quite right.
You need to wrap the img tag inside anchor tags. An example is added at the end of the article for reference.
Can we do the opposite, as if grayscale image to colored? Thanks!
No, you can’t do that.
Yes you can!
Use the code as following, maybe change it to your own needs:
.image6 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-filter: grayscale(100%);
}
.image6:hover {
-webkit-filter: grayscale(0%);
}
Could you explain what we need to change to make this work please? I uploaded an image calling it image1.jpg and added my own URL, but I just get a question mark when I publish.
Thanks
How could I make it change to a color, like all red?
I really love these! they work just beautifully!
On a side note: I have been looking for a way to have an (information box) pop up when you click on
the image but I just cant seem to figure it out! Is this a difficult thing to do? I have been reading and
reading for days now but I have still not figured it out.
Any suggestions would be awesome! Thank You for everything!!
I’ve also spent a couple of days trying to work this out with no joy… I’ve got an image that shrinks on hover and that includes a link to another page, but I’d like the name of that page to appear in the centre of the image on hover but I just can’t fathom it…
How would you be able to make the image a link? Like I want the image to have a hover-over effect, but also be a clickable link. Any help would be great!
Just use the image between anchor tags in HTML. You can refer this HTML images tutorial for more information.