<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<!--
Author : Mehmet Yılmaz
E-mail : ylmazmehmet60@gmail.com
Purpose: Designed for https://www.akademiktv.com/ eg one like.
Date : 03/18/2019
-->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="outer-box" id="let-1" onmouseenter="quick_view_box_content(this)">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1698fca32b1%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1698fca32b1%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="#">Card titulus I - Lorem Ipsum</a></h5>
<p class="card-text">Lorem ipsum dolor sit amet, ex possit iracundia pro, no cum aliquam luptatum. Ad albucius consetetur has, illud iracundia nam id. Ei nullam audire gubergren pri.</p>
<div class="card-price">£32,99</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="outer-box" id="let-2" onmouseenter="quick_view_box_content(this)">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1698fca32b1%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1698fca32b1%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="#">Card titulus II - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </a></h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="card-price">£343</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3" >
<div class="outer-box" id="let-3" onmouseenter="quick_view_box_content(this)">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1698fca32b1%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1698fca32b1%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="#">Card titulus III</a></h5>
<p class="card-text">Vix adipisci recusabo eu. Ex stet error duo. Et verear gubergren euripidis eos, eum semper labores rationibus an. Eam nobis appareat invidunt ei, quo lorem nullam inciderint id.</p>
<div class="card-price">Free</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3" >
<div class="outer-box" id="let-4" onmouseenter="quick_view_box_content(this)">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1698fca32b1%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1698fca32b1%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="#">Card titulus IV</a></h5>
<p class="card-text">Te sit euismod dissentiunt. Ex placerat salutatus voluptatum pri. Minim pericula incorrupte cum ei, sed no justo paulo. Ut simul utroque erroribus eum. Vix no labitur suavitate, sed quaeque percipit ne. Sed ut tale quidam inermis, at quo sanctus interpretaris.</p>
<div class="card-price">£28</div>
</div>
</div>
</div>
</div>
<div id="quick-view-box" style="display:none;">
<div class="quick-view-box-top quick-view-box-style">
<a href="#" class="quick-view-box-top-title"><span></span></a>
</div>
<div class="quick-view-box-middle">
<div class="quick-view-box-middle-content"></div>
</div>
<div class="quick-view-box-bottom align-bottom">
<button type="button" class="btn quick-view-box-bottom-btn ">Temere Accessum</button>
</div>
</div>
</div>
</div>
body {
font-family: sans-serif;
padding: 10%;
margin: 0;
background: #f7f8fa;
}
@media only screen and (max-width: 767px) {
.view-box {
visibility: hidden;
}
}
.view-box{
position: absolute;
top: -15%;
background: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 317px;
min-height: 130.51%;
z-index: 1;
box-shadow: 0 5px 30px 0px rgba(0,0,0,0.1),
0 5px 15px 3px rgba(0,0,0,0.08);
}
.view-box-left{
left: -19.7rem;
}
.view-box-left:before{
content: "";
position: absolute;
top: 42.6%;
left:19.77rem;
z-index: 1;
border: solid 15px transparent;
border-left-color: #FFF;
}
.view-box-right{
left: 100%;
}
.view-box-right:before{
content: "";
position: absolute;
top: 42.6%;
left:-30px;
z-index: 1;
border: solid 15px transparent;
border-right-color: #FFF;
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
min-height:11.7rem;
padding-bottom: 0px;
}
.card-title a{
margin-bottom: .5rem;
font-size: 18px;
font-weight: 600;
line-height: 1.34;
letter-spacing: -0.32px;
color: #505763;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 3rem;
}
.card-title a:hover {
color: #fdc800;
text-decoration: none;
}
.card-text{
margin-top: 0;
margin-bottom: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #686F7A;
font-size: 15px;
letter-spacing: -0.2px;
}
.card-price {
padding: 5px 5px 5px 5px;
display: flex;
color: #e91e63;
justify-content: flex-end;
min-height: 36px;
font-weight: 700;
font-size: 20px;
align-items: center;
}
.outer-box{
box-shadow: 0 0 1px 1px rgba(20,23,28,0.1), 0 3px 1px 0 rgba(20,23,28,0.1);
}
.quick-view-box-top{
margin-left: 20px;
margin-right: 20px;
margin-top: 16px;
margin-bottom: 5px;
}
.quick-view-box-style{
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-style: normal;
line-height: 1.43;
text-align: start;
text-shadow: none;
text-transform: none;
}
.quick-view-box-top-title{
font-size: 18px;
font-weight: 600;
line-height: 1.33;
letter-spacing: -0.3px;
color: #505763;
}
a.quick-view-box-top-title:hover, a.quick-view-box-top-title:focus {
color: #fdc800;
text-decoration: none;
}
.quick-view-box-middle{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
flex-direction: column;
}
.quick-view-box-middle-content{
-webkit-box-orient: vertical;
white-space: normal;
visibility: visible;
font-size: 15px;
line-height: 1.53;
letter-spacing: -0.2px;
color: #686F7A;
padding-top: 10px;
min-height: 320px;
}
.quick-view-box-bottom{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
}
.quick-view-box-bottom-btn{
color: #FFF;
background-color: #EC5252;
border: 1px solid transparent;
width: 100%;
height: 40px;
}
.quick-view-box-bottom-btn:hover{
color:#fff;
background-color: #521822;
border-color: transparent;
}
function quick_view_box_content(e) {
let title = e.querySelector("h5[class='card-title'] a").innerHTML;
let content = e.querySelector("p[class='card-text']").innerHTML;
document.querySelector("a[class='quick-view-box-top-title'] span").innerHTML = title;
document.querySelector("div[class='quick-view-box-middle-content']").innerHTML = content;
let width_from_left;
let full_width_of_screen=$(window).width()/2;
$('.outer-box').mouseenter(function(event){
$(this).prepend($("div#quick-view-box"));
width_from_left=event.pageX;
if (width_from_left > full_width_of_screen + full_width_of_screen*0.25){
$('#quick-view-box').attr('class','view-box view-box-left');
}else{
$('#quick-view-box').attr('class','view-box view-box-right');
}
$("#quick-view-box", this).show();
}).mouseleave(function(){
$("#quick-view-box", this).hide();
});
}
