This is my `jsfiddle` <https://jsfiddle.net/dibyendu/14jkh4qb/>. I want to align `images(Facebook,Twitter)` (initially they will be hidden) at center of main `div (class box)` on mouse over and the opacity of my `div (class box)` to `0.1`

Can I manage it with CSS only or I have to write some `Js` code for that

```css
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
 padding: 5px;
 width: 960px;
 margin: 20px auto;
}
header {
 height: 100px;
 padding: 0 15px;
}
#content {
 width: 290px;
 float: left;
 padding: 5px 15px;
}

#middle {
 width: 294px; /* Account for margins + border values */
 float: left;
 padding: 5px 15px;
 margin: 0px 5px 5px 5px;
}

#sidebar {
 width: 270px;
 padding: 5px 15px;
 float: left;
}
footer {
 clear: both;
 padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

 #pagewrap {
  width: 94%;
 }
 #content {
  width: 41%;
  padding: 1% 4%;
 }
 #middle {
  width: 41%;
  padding: 1% 4%;
  margin: 0px 0px 5px 5px;
  float: right;
 }

 #sidebar {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }

 header, footer {
  padding: 1% 4%;
 }
}

/* for 700px or less */
@media screen and (max-width: 600px) {

 #content {
  width: auto;
  float: none;
 }

 #middle {
  width: auto;
  float: none;
  margin-left: 0px;
 }

 #sidebar {
  width: auto;
  float: none;
 }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

 h1 {
  font-size: 2em;
 }
 #sidebar {
  display: none;
 }

}

#content {
 /*background: #f8f8f8;*/
}
#sidebar {
 /*background: #f0efef;*/
}
header, #content, #middle, #sidebar {
 margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
 /*border: solid 1px #ccc;*/
}

.inner1{
    float:left; 
    width:100%;
    /*background-color:#D9DFD8*/
    height:50px;
    text-align: justify;
    text-justify: inter-word;
    /*padding-left: .5cm;*/
    padding-top: .5cm;

    border-style: solid;
    border-width: 1px 1px 0px 1px;
   }
   .inner2{
    float:left; 
    clear: left;
    /*background-color:#CCCCCC;*/
    width:100%;
    height:50px;
    padding-top:.2cm;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
   }
   .output1{
   float:left; 
   width:33%;
   background-color:#D9DFD8;
   height:50px;
   text-align: justify;
   text-justify: inter-word;
   padding-left: .5cm;
   padding-top: .5cm;
   }
   .output2{
   float:left; 
   clear: left;
   background-color:#CCCCCC;
   width:33%;
   height:50px;
   padding-top:.2cm;
   }
   .left-span{
    padding-left: .2cm;
   }
   .right-span{
    padding-left:130px;
   }

   .button {
     font-family: tahoma;
     font-size: 8pt;
     line-height: 12px;
     margin-right: 5px;
     margin-top: 0;
     position: absolute;
     margin-left:-10px;
   }
   .community {

     margin-top: 15px;
     margin-left: 15px;
     position:absolute;
     top:0;
     right:8;
   }
   #outputbox{
    display:none;
   }

   #main-wrap {
    /*background-color: #D9D9D9;*/
   }

   #sidebar-left {
    background-color: #d2d2d2;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
   }

   #content-wrap {
   /*background-color: #c5c5c5;*/
   border-style: solid;
   border-width: 1px 0px 1px 1px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-align-content: center;
   align-content: center;
   }

   /* sizes */
   #main-wrap > div {
    min-height: 100px;    
   }

   #main-wrap > div { min-height: 100px; }

   /* layout */
   #main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
   }

   #sidebar-left {
    float: left;
    width: 30%;
   }

   #content-wrap {
    float: left;
    width: 50%;
   } 
   #sidebar-right {
    float: right;
    width: 20%;
    /*background-color: #c5c5c5;*/
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    position:relative;
   } 
   .bottom-content {
    position: absolute;
    bottom: 0;
    right: 5;
   }
   .container-item {   display: block;   margin: 5px 0;}
      .box:hover{
        opacity:0.2
      }
```

```html
<div id="pagewrap">

 <header>
  <h1>2 Column Responsive Layout</h1>
 </header>

 <section id="content">
   <div class="box">

    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_1</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>

   </div>
   <div style="padding:70px;"></div>

   <div class="box" >
    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_2</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>
   </div>

   <div style="padding:70px;"></div>

   <div class="box">
    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_3</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>
   </div>

 </section>

 <section id="middle">

   <div class="box" >
    <div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_1</span></div>
    <div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>
   </div>
   <div style="padding:70px;"></div>

   <div class="box" >
    <div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_2</span></div>
    <div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>
   </div>

   <div style="padding:70px;"></div>

   <div class="box">
    <div class="inner1" style="border-left: thick double Green;"><span class="left-span">Cat2_3</span></div>
    <div class="inner2" style="border-left: thick double Green;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div>                 
     <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
          <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>
   </div>

 </section>

 <footer>
  <h4>Footer</h4>
  <p>Footer text</p>
 </footer>

</div>
```