CSS3 > Animations

Opacity/Transparency in CSS3

How to specify the level of transparency with CSS in CSS3?


By using Opacity we can specify the level of transparency with CSS.

<style>
        a.class1 {
            font-size: 50px;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            border: 1px solid #c0c0c0;
            padding: 10px;
            background-color: Yellow;
            opacity: 0.5;
        }

            a.class1:hover {
                background-color: #690;
                opacity: 0.5;
            }
</style>

<body>
    <a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>
</body>

In the above code snippet, we applied style to the <a> tag.

OUTPUT

If the cursor is  On hover, the background color of the hyperlink will change as below.

 Views: 593 | Post Order: 98



Write for us