title: Change one div dimension if checkbox is checked - html css only
body: <p><a href="http://cssdeck.com/labs/maucarxu" rel="nofollow">Here</a> I've little project using only HTML &amp; CSS. I want to change <code>&lt;div class="pro"&gt;</code> properties when checkbox is checked. Want to hide all other <code>&lt;div class="pro"&gt;</code>'s and make <code>&lt;article&gt;</code> showed fully on the page.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pro{
    min-width:310px;
    width:350px;
    margin:10px;
    height:200px;
    top:0px;
    position:relative;
    background:rgba(39, 174, 96, 1.0);
    float:left;
    z-index:0;
    overflow:hidden;
  }
  .proimg{
    width:100%;
    height:200px;
    position:absolute;
    z-index:1;
    top:0px;
    margin:0;
    backface-visibility:hidden;
    transition:all 500ms;
  }
  .pro:hover img{
    transform:rotateY(180deg);
  }
  .pro:hover .prop{
    left:0;
    transition:ease 500ms;
    opacity:1;
  }
  .pro:hover .prolab{
    right:0;
    transition:ease 500ms;
    opacity:1;
  }
  .proh{
    position:absolute;
    z-index:3;
    background:rgba(236, 240, 241, 1.0);
    color:rgba(44, 62, 80, 1.0);
    padding:0 15px;
    top:5px;
    line-height:29px;
    margin:0;
  }
  .prop{
    position:absolute;
    z-index:2;
    width:290px;
    height:130px;
    line-height:16px;
    color:rgba(44, 62, 80, 1.0);
    background:rgba(236, 240, 241, 0.7);
    top:19px;
    text-align:center;
    padding:17px 5px;
    margin:0 25px;
    transition:ease 500ms;
    overflow:hidden;
    left:100%;
    opacity:0;
  }
  input{
    display:none;
  }
  .prolab{
    position:absolute;
    z-index:6;
    bottom:5px;
    right:100%;
    background:rgba(236, 240, 241, 1.0);
    color:rgba(44, 62, 80, 1.0);
    padding:0 15px;
    line-height:29px;
    cursor:pointer;
    opacity:0;
  }
  .prolab:before{
      content:"Read more";
  }
  article{
    position:absolute;
    color:rgba(44, 62, 80, 1.0);
    background:rgba(236, 240, 241, 1.0);
    opacity:0;
    z-index:-1000;
    margin:0;
    width:100%;
    overflow:scroll; 
    float:left;
    clear:both;
  }
  input:checked ~ article{
    opacity:1;
    z-index:5;
    position:absolute;
    height:200px;
    padding:10px;
  }
  input:checked ~ .pro{
    z-index:0;
    height:auto;
  }
  input:checked ~ .prolab{
    z-index:999;
    position:absolute;
    top:0px;
    margin-right:0px;
    background:rgba(44, 62, 80, 1.0);
    color:rgba(236, 240, 241, 1.0);
    width:25px;
    padding:0;
    text-align:center;
    height:25px;
    line-height:25px;
  }
  input:checked ~ .prolab:before{
    content:"x";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pro"&gt;
    &lt;img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"&gt;
    &lt;h4 class="proh"&gt;Pro Title&lt;/h4&gt;
    &lt;p class="prop"&gt;text here.&lt;/p&gt;
    &lt;input type="checkbox" id="pro1"&gt;
    &lt;label for="pro1" class="prolab"&gt;&lt;/label&gt;
    &lt;article&gt;  text here.
    &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class="pro"&gt;
    &lt;img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"&gt;
    &lt;h4 class="proh"&gt;Pro Title&lt;/h4&gt;
    &lt;p class="prop"&gt;text here.&lt;/p&gt;
    &lt;input type="checkbox" id="pro2"&gt;
    &lt;label for="pro2" class="prolab"&gt;&lt;/label&gt;
    &lt;article&gt;
   text here. 
    &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class="pro"&gt;
    &lt;img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"&gt;
    &lt;h4 class="proh"&gt;Pro Title&lt;/h4&gt;
    &lt;p class="prop"&gt;text here.&lt;/p&gt;
    &lt;input type="checkbox" id="pro3"&gt;
    &lt;label for="pro3" class="prolab"&gt;&lt;/label&gt;
    &lt;article&gt;
   text here. 
    &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class="pro"&gt;
    &lt;img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg"&gt;
    &lt;h4 class="proh"&gt;Pro Title&lt;/h4&gt;
    &lt;p class="prop"&gt;text here.&lt;/p&gt;
    &lt;input type="checkbox" id="pro4"&gt;
    &lt;label for="pro4" class="prolab"&gt;&lt;/label&gt;
    &lt;article&gt;
   text here. 
    &lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>