CODEWITHSUNDEEP
cssbackgroundopacitylinear-gradients
gotqn
gotqn

Reputation: 43636

Opacity - changing from-to for background with CSS

I have the following element with background:

enter image description here

and I want to set to it opacity changing from 0 to 1 for example. Is it possible to make this only with CSS?

This is how I am making the background:

padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;

Upvotes: 1

Views: 307

Answers (3)

feitla
feitla

Reputation: 1334

Is this what you are trying to do? fiddle

<button class="button">
   <span></span>
</button>

.button {
    padding: 5px 10px 5px 10px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    background-color: #E5D52B;
    width:400px;
    height:100px;
}
span {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%);
    left:0;
    top:8px;
    width:400px;
    height:100px;
    position:absolute;
    margin:0;
    padding: 0;
}

Upvotes: 4

JayKlassen
JayKlassen

Reputation: 32

here is how you do it:::

img
   {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
   }
 img:hover
   {
   opacity:1.0;
   filter:alpha(opacity=100); /* For IE8 and earlier */
   }

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

You can use CSS3 transitions.

.button {
    padding: 5px 10px 5px 10px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    background-color: #E5D52B;
    opacity:1;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;
}
.button:hover {
    opacity:0;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;
}

You can replace .button:hover with another definition for the same effect. See this fiddle.

Upvotes: 0

Related Questions