"Similar Udemy Quick View Box "
Bootstrap 4.1.1 Snippet by ylmazmehmet60

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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();
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Kit
arrow key navigation thumbnail gallery modal view
eCommerce Quick view Popup & Product row
Quick Contact

Questions / Comments: