When I am above the div tag, I show one sketch of css and I like to add a couple of buttons (like Share) on top of the overlay, how can I do this?
this is my code for freezing
.portfolio-item img {
width:100%;
vertical-align:top;
}
.portfolio-item:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.portfolio-item:hover:after {
opacity:1;
}
#like {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
javascript used to create div
var element = document.createElement("div");
element.setAttribute("id",listItem"+i);
element.setAttribute("class","col-md-4 portfolio-item");
output.appendChild(element);
javascript to show overlay icon
var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);
document.getElementById("red"+i).appendChild(ele);
html code
<div id="output" class="col-lg-12 container"></div>
Now it looks like this: "

and I expect something like this:

source
share