How to show font amazing icons (e.g. views) on a css hover overlay?

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: "

enter image description here

and I expect something like this:

enter image description here

+4
source share
2 answers

You can create a child div inside the main container

<div id="output" class="col-lg-12 container">
   <img src="SOMETHING"/>
   <div><i class="fa fa-heart"/><span class="counts">23</span></div>
</div>

In css

#output img {
    width:100%;
    height:100%;
}
#output > div{
    display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    z-index: 10;
}
#output > div:hover{
    display:block;
}
+1
source

Assuming you set the font correctly,

you can do something like this when you create an overlay.

var ele = document.createElement("div");
    ele.setAttribute("id","like");
    ele.setAttribute("class","like"+i);

var faHeart = document.createElement("div");
    faHeart.setAttribute("class","fa fa-heart-o");

ele.appendChild(faHeart);
0

Source: https://habr.com/ru/post/1621694/


All Articles