Black Friday Sale! Save up to 50% off!
  1. Home
  2. Features
  3. Animation Effects
  4. Animation On Hover
  5. Transparency On Hover

How to change the element's Transparency on hover

You can modify the Element Transparency on Hover to add interaction and attractiveness to website design. In the Property Panel, click the Hover link and check the Hover checkbox. Set the Transparency to be applied on Hover. Click somewhere in the Block to unselect the Element. Hover the Element to test the Transparency Change.

Browse By Feature Categories

Web Page Elements
Supported Systems
Visual Page Editor
Design Elements
Media Libraries
Element Properties
Responsive
Animation Effects
Theme Settings
Contact Form
Header & Footer
Blog
E-Commerce
SEO
Custom Code
Application Features
Site & Page Properties
WordPress Widgets

Everything You Need To Create Your Free Website

Use our Website Builder to design and create websites without coding. Drag and drop anything you want, to any place you want it. The Website Creator automatically adapts your website for mobile to make it responsive. Choose from more than 15,000 customisable website templates.

Download for Windows Download for Mac

Related Features

Border On Hover

The Element Border is also important to improve Elements' interaction and draw visitors' attention. You can change the Hover Border for such Elements as Icon, Image, Shape, Group, Grid, etc. In the Property Panel's Hover section, check the Hover checkbox. Modify the Border to be shown while hovering an Element.
Shadow On Hover

You can modify the Shadow property on Hover for Texts and other Elements. To set the Shadow on Hover, add or select an Element. Next, click on the Property Panel's Hover link, check the Hover checkbox, modify the Shadow to be applied on Hover. You can start with one of the Shadow Presets and customize it if needed.

Rotate On Hover

The Rotation on Hover is the next important and complex effect. To rotate an Element on Hover, add or select an Element and go to the Property Panel. Go to and click the Hover link in the Animation On section, and then check the Hover checkbox. Use the Slider to set the Rotation Angle or enter the value into the input field. The supported values for the Rotation Angle are from 0 to 359.
Radius On Hover

For Images and Shapes, Groups, and Grid Cells, you can change the Radius on Hover. Elements become attractive with this property, prompting action (Buy Now, Read more buttons, etc.) and making your design unique. On the Property Panel's Hover section, enable the Hover Mode. Drag the Radius slider to set its value On Hover.
Hover Duration

You can manage hover animation by setting its Duration. Set Duration for Animation on Hover add or select an Element and go to the Property Panel. Select the Animation On section's Hover link and choose the Hover checkbox. The supported values for the Slider are from 10 to 200, and you can enter a bigger number into this field if needed.
Scale On Hover

Scaling can look like the most natural reaction on your cursor. Therefore, it can be very popular. You can easily add the Scale On Hover to your website. For that, add or select an Element and then go to the Property Panel. Click the Hover link of the Animation On section and check the Hover checkbox. Scroll down to the Scale, Rotate and Move properties. The actual size is equal to 100.

Move On Hover

The Hover Animation Effects used on modern websites have become more sophisticated. One of the effect examples is the Element Move on Hover. You can add the move of an Element on Hover. Add or select an Element and go to the Property Panel. Click on the Hover link and then check the Hover checkbox. Set the values for the Move X, Y property.

Color On Hover

Setting the Element Color On Hover helps focus the visitors' attention on an Element and gives an impression and concept of the desired idea about its meaning. You can change the Element's Color on Hover. For that, select an Element, and in the Property Panel, go to the Animation On section, click the Hover link, and then the Hover checkbox. Modify the Color to be applied on hover.
Background Color To Gradient On Hover

Adding the Hover Animation to a Shape with a background, you may want to change the solid fill to something attractive, like a Gradient. For that, select a Shape, and go to the Property Panel Hover Link. Click on the Animation On - Hover link and check the Hover checkbox. Seleсt the Gradient Type for the Backgroud and set the Gradient.
Background Image To Image On Hover

You can also change the Fill to Images and even change one Background Image to another while hovering, which can entertain your visitors a lot. Select a Shape and add an image for the background. Go to the Animation On section of the Property Panel and click on Hover. Enable the Hover effect and select the Image as the Backgroud Type. Choose the Hover Image. Test.

How To Use Transparency On Hover Making Your Design Wonderful

Web design with the Opacity Hover Effect can be great and, at the same time, have some pitfalls. Transparency is the effect created when a colored area, text, or image is "thinned" or as if "blotted" so that the color is diluted and what's hidden underneath is revealed. Like the HTML and CSS with our service, you can easily change transparency level, rotate, change the opacity scale, change (like the CSS) background opacity, and so on. You can properly apply the image opacity, like CSS background opacity, if you don't create a color overlay or create Transparency when the site visitors hover over the element. You can change the opacity property that makes the parameter, making this effect look better. If you don't know how to set opacity easily or how to create elements with Transparency, our service will help you in the working process.

If you wish to build up the contrast and make your website more expressive content, our service allows you to change (like CSS) opacity property and add Transparency on the items. You can only set the opacity and change other parameters and get the wonderful effect, and as the user is hovering over the elements, he will see nice animation. Some people don't know how to create hover effects, set opacity on the different images, or change (without CSS) opacity property. With us, you can create animations, and at times the user hovers over the items, it will look great. So, we will help you in this case. You don't need to find different instruments or read related articles, our service has every required mechanism, and you will find every necessary feature. Transparency is one of the most popular effects today, so make sure, opacity plays a huge role in modern web design.

With us, you can easily set the opacity for your background image (like CSS), and our features change the hover selector. If you don't know to code, you can control every opacity property, making a different look for the elements. As a rule, people change with CSS opacity property, and they use CSS code to make changes in design. We offer you nice features for your design, and if you want to know how to add effects on the elements and set an impact on the text or image, it will help you. Our animation features (similar to the CSS opacity property) allow the designer to enter a focal point with a color pulse and control opacity property to create attractive animations easily. You can use Transparency to highlight text against a background that cannot show it in the best way, and even if the visitor wants to skip to content, he will still notice this effect.

Company
Product
Themes & Templates
Nicepage
Web Design