curiousguy curiousguy - 5 months ago 13
Javascript Question

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>




Answer

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