We Keep Coding

How to keep div x to the right of img its currently overlayed on using position absolute?

I am trying to create this (Black represents the div in my current code):
Currently the div is not consistent in its placement, like I would like it to be (I would like it to be constantly ini the same place like the image above).
How can I make the div stay in the same place like in the image?
Here is what I currently have:
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
height: 100%;
padding: 5px;
margin-top: 95px;
/* 25 */
margin-right: 25px;
margin-left: 215px;
margin-bottom: 170px;
text-align: center;
}
#example {
position: absolute;
top: 10px;
left: 130px;
padding: 5px;
background-color: white;
border: 2px solid red;
color: darkgreen;
}
.grid-item:active {
box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}
.grid-item:hover {
background-color: #262626;
}
.grid-item {
position: relative;
padding: 0px;
border-radius: 10px;
transition: 0.2s background-color;
}
.thumbnail {
/* background-color: black; */
/* object-fit: cover;
background-repeat: no-repeat;
background-size: cover; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 240px;
/* height: 70%; */
border-radius: 11px;
border: 1px solid #282828;
cursor: pointer;
object-fit: cover;
}
/* object-fit: cover; */
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 75px;
cursor: pointer;
}
.portalTitle {
margin-top: 25px;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
}
.profileImg {
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 25px;
margin-top: 10px;
object-fit: cover;
}
<div class="content">
<div class="grid-item">
<img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
<div id="example">This is my div</div>
<div class="details">
<img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731">
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="images/testImg.png">
<div id="example">This is my div</div>
<div class="details">
<img class="profileImg" src="images/testImg.png">
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
</div>

Put your image inside a container div and make your example be positioned absolute to that div, not the griditem div. Also, DO NOT use multiple elements with the same ID. Here is an example where I made the first item be like you want it to be and your second one is how you originally had it so you can see the difference.
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
height: 100%;
padding: 5px;
margin-top: 95px;
/* 25 */
margin-right: 25px;
margin-left: 215px;
margin-bottom: 170px;
text-align: center;
}
.example {
position: absolute;
top: 10px;
left: 130px;
padding: 5px;
background-color: white;
border: 2px solid red;
color: darkgreen;
}
.grid-item:active {
box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}
.grid-item:hover {
background-color: #262626;
}
.grid-item {
position: relative;
padding: 0px;
border-radius: 10px;
transition: 0.2s background-color;
}
.thumbnail {
/* background-color: black; */
/* object-fit: cover;
background-repeat: no-repeat;
background-size: cover; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 240px;
/* height: 70%; */
border-radius: 11px;
border: 1px solid #282828;
cursor: pointer;
object-fit: cover;
}
/* object-fit: cover; */
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 75px;
cursor: pointer;
}
.portalTitle {
margin-top: 25px;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
}
.profileImg {
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 25px;
margin-top: 10px;
object-fit: cover;
}
.imgcontainer {
display: inline-block;
position: relative;
}
<div class="content">
<div class="grid-item">
<div class="imgcontainer">
<img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
<div class="example">This is my div</div>
</div>
<div class="details">
<img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731" />
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="images/testImg.png" />
<div class="example">This is my div</div>
<div class="details">
<img class="profileImg" src="images/testImg.png" />
<span class="portalTitle"> Shanghai, China night sounds</span>
</div>
</div>
</div>

Anyone have easy way to create this using css and html?

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>

This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>

.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>

.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>

.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>

First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>

This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

Create a new div on selecting the menu in javascript

I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal
.header{
width:100%;
height:40px;
background:#f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top:0px;
color: green;
font-weight:bold;
}
.container{
width: 100%;
min-height: 150px;
padding-top:2px;
display: flex;
}
.container .box1{
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #inside{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
padding-bottom:10px;
border-radius: 1px;
background:#f4f3f1;
}
.container .box1.box2{
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom:10px;
background:#f4f3f1;
}
.tabb{
float:left;
margin-left:10px;
margin:5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<body>
<div class="header">
<select class="tabb" name="opt" id="opt" >
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="inside" >
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second" >
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
</div>
</body>
Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .

You mean this?
Also IDs need to be unique
$(function() {
$("#opt").on("change", function() {
$(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
</div>
</body>
To add views, try this:
var views = {
"three": ".box3",
"four": ".box3,.box4"
}
$(function() {
$("#opt").on("change", function() {
var view = views[this.value]; // if three or four
$(".box3,.box4").hide(); // hide anyway
if (view) $(view).show(); // show box2 or box3 and box4
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box4 #fourth {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
<option value="four">Four view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
<div class="box1 box2 box4">
<div id="fourth">
<center>Inside Box4</center>
</div>
<center>Main Box4</center>
</div>
</div>
</body>

first you must addEventListener for your select input and when you chose Three View:
//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);

How do I center my divs and make them stack with media query [duplicate]

This question already has an answer here:
Row-wrap center align in flexbox
(1 answer)
Closed 4 years ago.
So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other.
I have no idea why it's behaving th way it is.
I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.
.wrapper {
margin-top: 15%;
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
float:left;
display: inline;
margin-left: 30%;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#two {
background-color: orange;
float:left;
margin-right:30px;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
#two {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>

Use flexbox and you can easily do this without the need of media query:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
display: flex;
justify-content: center; /*center the element*/
flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}
.wrapper div {
min-height: 300px;
padding: 10px;
background-color: orange;
height: 400px;
width: 250px;
border: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
You can also use inline-block instead of float:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
overflow: hidden;
text-align:center;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
#two {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div><div id="two">two</div>
</div>

How to align images at center of div on mouse over

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
#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
}
<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>

see here : jsfiddle
you can do this with position:absolute
added this code :
.box div:last-child {
position:absolute;
top:45%;
left:0;
right:0;
margin:0 auto;
text-align:center;
transition:0.3s;
opacity:0;
}
.box {
position:relative;
display:inline-block;
}
.box:hover div:last-child{
opacity:1;
}
.box:hover div:not(:last-child) {
opacity:0.2;
}
removed the box:hover{opacity:0.2} from your code because that made everything ( including the images ) to have the opacity 0.2 on hover
there are more ways to do this. this is just one of the solutions. let me know if it worked

Replace your .box divs with this one:
<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 class="center hidden">
<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>
And add this CSS stuff with your own :
.box{
position:relative;
}
.box:hover .center{
display:block;
}
.hidden{
display:none;
}
.center{
position:absolute;
text-align:center;
margin-top:20%;
width:100%;
height:100%;
}

Put a class name for the div(e.g. images) within which the images are there.
<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 class="images">
<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>
Add the following CSS:
.box{
position: relative;
display: inline-block;
}
.box .images{
display: none;
position: absolute;
left: 40%;
top: 40%;
}
.box:hover .images{
display: inline-block;
cursor: pointer;
}
.box:hover .inner1, .box:hover .inner2{
opacity: 0.1;
}

Only need to add the CSS bellow and add a class to the image wraper.
https://jsfiddle.net/Dhanck/14jkh4qb/1/
.inner-img {
display: none;
position: absolute;
margin-top: 105px;
margin-left: 135px;
}
.box:hover .inner-img {
display: block!important;
opacity:1;
}
.box:hover div:not(.inner-img) {
opacity:0.2;
}