A few minor punctuation changes (#20736)
* A few minor punctuation changes Added colon after first Example to match others. Added periods at the end of sentences. Put space between 'MDN web docs', capitalized, added colons. * Correct markdown syntaxpull/20494/head^2
parent
af9db2657b
commit
6ec1384d0c
|
@ -9,14 +9,14 @@ The ```opacity``` property allows you to make an image transparent by lowering h
|
||||||
|
|
||||||
1.0 is the default value for any image. It is fully opaque.
|
1.0 is the default value for any image. It is fully opaque.
|
||||||
|
|
||||||
Example
|
Example:
|
||||||
```css
|
```css
|
||||||
img {
|
img {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. The x takes a value from 0-100.
|
Include ```filter: alpha(opacity=x)``` for IE8 and earlier. `x` takes a value from 0-100.
|
||||||
```css
|
```css
|
||||||
img {
|
img {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
|
@ -24,7 +24,8 @@ img {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Here's an example of an image set to the parameters in the example above.
|
Here's an example of an image set to the parameters in the example above:
|
||||||
|
|
||||||
![image at 30% opacity](https://github.com/lvcoulter/images/blob/master/Opacity30percent.jpg?raw=true)
|
![image at 30% opacity](https://github.com/lvcoulter/images/blob/master/Opacity30percent.jpg?raw=true)
|
||||||
|
|
||||||
|
|
||||||
|
@ -41,10 +42,10 @@ img:hover {
|
||||||
filter: alpha(opacity=100);
|
filter: alpha(opacity=100);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
[A codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
|
[Here's a codepen example to show a transparent image turning opaque on hover](https://codepen.io/lvcoulter/full/JrzxXa/)
|
||||||
<!--I cannot figure out how to embed a Codepen. I would really like to know-->
|
<!--I cannot figure out how to embed a Codepen. I would really like to know-->
|
||||||
|
|
||||||
You can create the opposite effect with less code since the image is 1.0 opacity by default
|
You can create the opposite effect with less code since the image is 1.0 opacity by default.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
```css
|
```css
|
||||||
|
@ -53,13 +54,13 @@ img:hover {
|
||||||
filter: alpha(opacity=30);
|
filter: alpha(opacity=30);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
[A codepen example to show transparency on mouse-over](https://codepen.io/lvcoulter/full/xXBQoR/)
|
[Here's a codepen example to show transparency on mouse-over](https://codepen.io/lvcoulter/full/xXBQoR/)
|
||||||
|
|
||||||
|
|
||||||
#### More Information:
|
#### More Information:
|
||||||
-w3schools.com [CSS Opacity/Transparency](https://www.w3schools.com/css/css_image_transparency.asp)
|
- w3schools.com: [CSS Opacity/Transparency](https://www.w3schools.com/css/css_image_transparency.asp)
|
||||||
|
|
||||||
-MDN web docs[Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
|
- MDN Web Docs: [Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue