Card Profile Style01
<!DOCTYPE html>
<html>
<head>
<title>CARD PROFILE STYLE01 | NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
<figure class="snip1336">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
<figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
<h2>Mezgani said<span>Engineer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
<a href="https://www.mezganisaid.com/" class="follow">Follow</a>
<a href="https://www.mezganisaid.com/" class="info">More Info</a>
</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
<figure class="snip1336 hover">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
<figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
<h2>Mezgani said<span>Engineer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
<a href="https://www.mezganisaid.com/" class="follow">Follow</a>
<a href="https://www.mezganisaid.com/" class="info">More Info</a>
</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-5">
<figure class="snip1336">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
<figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample4.jpg" alt="profile-sample4" class="profile" />
<h2>Mezgani said<span>Engineer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo temporibus harum sed aspernatur quidem voluptates odit qua </p>
<a href="https://www.mezganisaid.com/" class="follow">Follow</a>
<a href="https://www.mezganisaid.com/" class="info">More Info</a>
</figcaption>
</figure>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);
.snip1336 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #141414;
}
.snip1336 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1336 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1336 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1336 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1336 figcaption a {
padding: 5px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
margin: 10px 0;
display: inline-block;
opacity: 0.65;
width: 47%;
text-align: center;
text-decoration: none;
font-weight: 600;
letter-spacing: 1px;
}
.snip1336 figcaption a:hover {
opacity: 1;
}
.snip1336 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1336 .follow {
margin-right: 4%;
border-color: #2980b9;
color: #2980b9;
}
.snip1336 h2 {
margin: 0 0 5px;
font-weight: 300;
}
.snip1336 h2 span {
display: block;
font-size: 0.5em;
color: #2980b9;
}
.snip1336 p {
margin: 0 0 10px;
font-size: 0.8em;
letter-spacing: 1px;
opacity: 0.8;
}
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
