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'
2019-08-05 16:17:33 +00:00
forumTopicId: 301055
2021-01-13 02:31:00 +00:00
dashedName: decrease-the-opacity-of-an-element
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
2018-09-30 22:01:58 +00:00
< 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 >
2020-11-27 18:02:05 +00:00
2018-09-30 22:01:58 +00:00
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.
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Set the `opacity` of the anchor tags to 0.7 using `links` class to select them.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
$('style').text()
)
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +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;
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 >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
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
```