2018-09-30 22:01:58 +00:00
---
id: 587d781c367417b2b2512abf
title: Decrease the Opacity of an Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/c7aKqu4'
---
## Description
< section id = 'description' >
The < code > opacity< / code > property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
< blockquote > A value of 1 is opaque, which isn't transparent at all.< br > A value of 0.5 is half see-through.< br > A value of 0 is completely transparent.< / blockquote >
The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.
< / section >
## Instructions
< section id = 'instructions' >
Set the < code > opacity< / code > of the anchor tags to 0.7 using < code > links< / code > class to select them.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: Your code should set the < code > opacity</ code > property to 0.7 on the anchor tags by selecting the class of < code > links</ code > .
2019-03-05 17:11:27 +00:00
testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code), 'Your code should set the < code > opacity</ code > property to 0.7 on the anchor tags by selecting the class of < code > links</ code > .');
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< style >
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" id = "thumbnail" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Alphabet< / h4 >
< hr >
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-04-12 16:17:12 +00:00
```html
< style >
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" id = "thumbnail" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Alphabet< / h4 >
< hr >
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```
< / section >