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.

        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;

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

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


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

 Views: 536 | Post Order: 98

Write for us