greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 syntax
pull/20494/head^2
Aretha S. H. Walls 2018-11-02 22:15:12 -07:00 committed by Huyen Nguyen
parent af9db2657b
commit 6ec1384d0c
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
guide/english/css/image-opacity-and-transparency/index.md
View File

@ -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.
Example
Example:
```css
img {
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
img {
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)
@ -41,10 +42,10 @@ img:hover {
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-->
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:
```css
@ -53,13 +54,13 @@ img:hover {
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:
-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)