I want to hover my mouse over an organization chart box and have the image with full description. However, the image do not pop out and the description also in the straight line with the name. Any thoughts? Thank you.
This is my coding. I try to make it like this website EXAMPLE OF THE WEBSITE. Is it possible to do it?
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: ;
background-color: #f1f1f1;
-webkit-font-smoothing: antialiased;
}
.box-row {
text-align: center;
}
.box {
border: 4px solid #000000;
height: 80px;
width: 286px;
display: inline-block;
top: 46px;
}
.box:hover {
box-shadow: 8px 8px 9px -4px rgba(0, 0, 0, 0.1);
width: 296px;
top: 36px;
}
.bar {
width: 30px;
transform: rotate(90deg);
margin: 13px auto 13px auto;
border: 2px solid #000000;
}
.bar2 {
width: 84px;
transform: rotate(90deg);
margin: 39px auto -6px auto;
border: 2px solid #000000;
}
.horizontal-bar {
display: inline-block;
width: 35px;
margin-bottom: 20px;
margin-left: -6px;
margin-right: -5px;
border: 2px solid #000000;
}
.box-group {
display: inline-block;
width: 48%;
}
.second {
margin: 8px 10px;
}
.second-separator {
width: 629px;
margin-bottom: 55px;
margin-right: 344px;
border: 2px solid #000000;
}
.vertical-bar {
width: 176px;
margin-bottom: -55px;
margin-top: 27px;
transform: rotate(90deg);
border: 2px solid #000000;
}
/* setup tooltips */
.tooltip {
position: relative;
}
.tooltip:before,
.tooltip:after {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
}
.tooltip:after {
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0, 0, 0, .75);
border-left: 6px solid transparent;
content: '';
height: 0;
top: 20px;
left: 20px;
width: 0;
}
.tooltip:before {
background: rgba(0, 0, 0, .75);
border-radius: 2px;
color: black;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: px;
white-space: nowrap;
height: 300px;
width: 300px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background: white;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2, .2, 1);
transition: all .2s ease-in-out;
}
.tooltip.expand:after {
transform: translate3d(0, 6px, 0);
transition: all .1s ease-in-out;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
.tooltip.expand:hover:after {
transition: all .2s .1s ease-in-out;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#;">
<h2>STRUCTURE</h2>
<br>
<br>
<br>
<div class="box-row">
<div>
<div class="box">
<div class="tooltip expand" data-title="Aiman Iskandar - Monitor all the operation in the CTS Division">
<p>Vice President</p>
<p>Business Technology</p>
<p>aiman iskandar</p>
</div>
<hr class="bar" />
</div>
<div>
<div class="box">
<p>Head</p>
<p> Consulting & Technology Services</p>
<p>aidil iman</p>
</div>
<hr class="bar2" />
</div>
<br />
<br />
</div>
</div>
</div>
<br>
</body>
</html>
What you can do is make a JavaScript modal, and I'll use a modified trick from this tutorial:
1: Make a modal box - that is, make a
<div>element with the content and positioning and whatever you want.2: Make a JavaScript
<script>element, and inside it place this code:You're good to go!