UDL Law Firm Hover Cut (Ellipsis) Preview

by xaliber

HTML

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">

<div class="pic" style="margin-bottom:-10px;"><img src="https://i.imgur.com/xaIjbg5.png"></div>
<ul>
  <li>
    <div class="img"><img src="https://i.imgur.com/nA1iUQL.png"></div>
    <h3>Agus Soetjahyo</h3>
    <h4>
    President Director
    </h4>
  </li>
  <li>
    <div class="img"><img src="https://i.imgur.com/NgqKuJT.png"></div>
    <h3>Budihardjo Hardisurjo, B.Sc.,SH.,MH.</h3>
    <h4>
    Director
    </h4>
  </li>
  <li>
    <div class="img"><img src="https://i.imgur.com/wvunKlz.png"></div>
    <h3>Andreas Roy Ginting, Ak.</h3>
    <h4>
    Managing Partner
    </h4>
  </li>
</ul>
<div class="pic"><img src="https://i.imgur.com/SulsC4L.png"></div>

CSS

body {
  background: #fff;
  font-family: "Nunito Sans", sans-serif;
  color: #333;
  font-size: 16px;
  overflow-x: hidden;
}

/*
.pic {
  width: 100%;
}
.pic img {
  width: 100%;
}
*/

.pic {
  width: 1366px;
}

.pig img {
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 !important;
  display: block;
  padding-left: 150px;
  position: relative;
  background-image: url(https://i.imgur.com/PsCyT55.png);
  background-repeat: no-repeat;
  background-color: #f5fdff;
  width: 1366px;
  height: 312px;
}

li {
  text-align: center;
  display: inline-block;
  width: 220px;
  overflow: hidden;
  margin-right: 90px;
  position: relative;
  background: #f5fdff;
  padding-top: 40px;
  padding-bottom: 40px;
  transition: .2s;
  border: 3px solid #f5fdff;
}

.img {
  height: 160px;
  overflow: hidden;
}

h3 {
  margin: 1em 0 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
h4 {
  margin: 0;
  font-weight: normal;
}

li:hover {
  width: 360px;
  margin-left: -70px;
  margin-right: 20px;
  /* margin-right = -70px + 90px jarak di atas */
  box-shadow: 0 0 2rem #ccc;
  border: 3px solid #fff;
  z-index: 10;
  background: #ecf5f9;
  cursor:pointer;
}