Need help with photo effect.

BB Theme
1

Trying to make a hover effect for my photo. By using the photo module and using this CSS snippet

.image img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.image img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

In addition to this CSS snipet, how do I add a “fading” effect? Basically making the opacity lower when hovering the picture. Or add some kind of shadow overlay.

Thank you in advance!

2

Hey Johnny,

Thanks for posting! You could change the opacity on hover by simply adding opacity:0.5, that should give you a fading effect. Regarding the shadow overlay, you may want to search more about that on Google. If you’re interested, I learned everything about CSS on the site below. You may want to check that out. :slight_smile:
http://www.w3schools.com/

Ben

3

Okay thank you, is there any code to add on this snippet to put a colour-hover effect. For example, when I hover the image, it turns a bit red.

4

Hey Johnny,

Sorry but that’s not possible with just CSS. You have to add another layer on your image and play around with its opacity to get that kind of effect.

Ben