Brightness effect for banner

[Jan Blogxpert]

Hi, actually im building some ads, but I want to add on them a brightness effect (yeah that standar effect for today when you put the mouse over the ad and it gets a light effect). But sincerely I dont know how.to do it. Someone can help me with it.

Thank you.

[San Khong]

Hi Jan,

It depends on how you want to do the light effect.  Do you have a link to an example with the light effect so I can make a suggestion on how to implement that in Google Web Designer? 

In Google Web Designer, you can use the hover event to set an action.  For example, you can set an event on mouseover of the page to show another image that was hidden.

In the CSS panel, hide the element you want to hide using visiblity: hidden.

Click on the + button in the Events panel on the right hand side.

Select the page for the target

Select Mouse > mouseover for event

Then you can select the action you want, for example, CSS > set styles to turn an element visibility to visible.

Hope it helps.

San

Google Web Designer team

[Jan Blogxpert]

Hey San, thank you for your time.

Look, the goal is very simple. I need when someone put the mouse over the ad, it gets a full light effect on the ad. I am attaching a example (I think it is very easy to do it in HTML), but I want to know the way to do it in GWD.

For otherwise if you have a template like this, I will be happy if you can share it. Regards!

[San Khong]

Thanks for the example. From the first look, it looks like using CSS filter is the way to go.  The only problem is browser support that is out of our control because CSS filter is not supported in IE.  

There are a couple of ways that you can do this.  You can try setting the opacity to see the subtle change in the ad.  Or you can change the CSS background-color on the element such as background color div to achieve the brightness.  

Here is the example for using opacity and one for using background-color.

In the examples, I set the event on mouseover of the page, and the action to change the opacity of the image or the background color of the background div.

Please keep in mind that whatever you can do in CSS can be done in Google Web Designer.  If you find a better way to change brightness, you can follow my example to change it on mouseover event and mouseout event.

[Jan Blogxpert]

Thank you so much!, it is perfect. I was very close to do it using mouseover but I did not use mouseout property in the ad.