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 “Custom HTML” block in WordPress to showcase all CSS image overlay effects.
18 Comments
Leave your reply.