<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
Untitled
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</script>
<script>
$(function(){
$(".container1").hover(function (e) {
$(this).find('.div-options').css('visibility',"visible");
}, function (e) {
$(this).find('.div-options').css('visibility',"hidden");
});
})
</script>
<style>
.container1{
min-height:83px;
width: 74.21383647798743%;
*width: 74.16142557651992%;
background-color:#FFF;
margin-left:128px;
border:1px solid #4867aa;
margin-top:1px;
}
.div-image{
height:80px;
width:68px;
margin-top:1px;
margin-left:1px;
float:left;
}
img{
height:80px;
width:68px;
}
.div-right{
min-height:81px;
width:667px;
margin-top:2px;
margin-left:80px;
}
.div-right-top{
height:28px;
width:667px;
}
.div-right-mid{
min-height:28px;
width:667px;
background-color:#FFF;
text-align:-webkit-left;
}
.comment-text{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#000;
}
.div-right-bottom{
height:24px;
width:667px;
}
.div-user-name{
height:28px;
float:left;
margin-left:1px;
font-family:'Open Sans', sans-serif;
}
.text-user-name{
font-size:16px;
color:#000066;
font-weight:600;
}
.div-time{
height:18px;
width:70px;
float:left;
margin-left:14px;
}
.div-options{
height:18px;
float:right;
margin-right:20px;
visibility:hidden;
}
.time-text{
font-size:78%;
color:#6d7371;
font-family:sans-serif;
}
.div-like{
height:18px;
width:30px;
float:left;
margin-left:150px;
margin-top:5px;
}
.div-reply, .div-dislike{
height:18px;
width:40px;
float:left;
margin-top:5px;
}
.text-bottom{
color:#06C;
text-transform:capitalize;
}
.div-desh{
height:18px;
width:10px;
float:left;
margin-top:5px;
}
.small {
font-size:77%;
font-family:'Open Sans', sans-serif;
}
.div-option-div {
position: relative;
display: inline-block;
}
.div-option-div:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
</style>
</head>
<body>
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1" onMouseOver="show_divicon()" onMouseOut="hide_divicon()">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
<div class="container1">
<div class="div-image">
<img src="google-pixel-2880x2560-stock-hd-5881.jpg">
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
Atif Sheikh
</span>
</div>
<div class="div-time">
<span class="time-text">
09:13 PM
</span>
</div>
<div class="div-options">
<span class="time-text div-option-div">
<a href="#">
Arrow
</a>
</span>
</div>
</div>
<div class="div-right-mid">
<span class="comment-text">
this is comment
</span>
</div>
<section class="div-right-bottom small">
<div class="div-like">
<span class="text-bottom">
like
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
dislike
</span>
</div>
<div class="div-desh">
<span class="text-bottom">
-
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
</section>
</div>
</div>
</body>
</html>
JΛ̊KE