Opacity of inline-block - html

Question

I want to show a number of text blocks, at first just showing the title and a few lines, and after clicking a 'more' tag show it all, or hide it again.
I used the CSS trick of hidden checkbox and label, and it looked almost correct.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
// display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
The label to click on only had the width of the text, whereas I wanted it streteched over the full width.
Searching suggested adding 'display: inline-block' which I did. It indeed stretched the label over the full width, but I also lost the transparency: it sort of lies in front of the text.
I tried and I searched but could not find a proper solution. Hope someone can help me.

Answer 1

Is this the effect you want?
using negative margin to move div up
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 128, 0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display: inline-block;
padding-top: 40px;
color: white;
font-style: italic;
margin-top: -40px;
padding-left: 1%;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked~.lbl1:after {
content: "show less";
}
input[id^="more"]:checked~.arttxt1 {
height: 100%;
}
.arttxt1 {
margin-left: 1%;
width: 50%;
margin-bottom: 2px;
line-height: 2.5ex;
height: 8.4ex;
/* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox' />
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>

Answer 2

To clarify, it doesn't lose the transparency - what is actually happening is that because your <div class="arttxt1"> is a block element, the label is being pushed down to below the text.
As such, you can either use margin-top as per Chris Li's answer, or position:relative and top to push the label up over the top of your text.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
position:relative;
top: -40px;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>