Profile Hover Effects

In this example below you will see how to do a Profile Hover Effects with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by haibnu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright haibnu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Profile Hover Effects</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  text-align: center;
  padding-top: 40px;
}

.col {
  float: left;
  width: 50%;
  margin-bottom: 40px;
}

figure {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 260px;
  width: 260px;
  height: 260px;
  transition: all 250ms;
}
figure img {
  max-width: 260px;
  max-height: 260px;
}

.one {
  position: relative;
  z-index: 1;
}
.one:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
  transform: scale(1);
  transition: all 250ms;
}
.one img {
  position: relative;
  display: inline-block;
  z-index: 1;
  overflow: hidden;
  max-height: 260px;
  max-width: 260px;
  border-radius: 260px;
}
.one:hover:before {
  background-color: yellow;
  transform: scale(1.1);
}

.two {
  position: relative;
  text-align: center;
}
.two:before, .two:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transition: all 250ms;
}
.two:before {
  width: 250px;
  height: 250px;
  border-radius: 250px;
  background-color: lightgrey;
}
.two:after {
  width: 70%;
  left: 15%;
  height: 5px;
  top: 105%;
  border-radius: 100%;
  background-color: grey;
  filter: blur(5px);
  opacity: .3;
}
.two img {
  position: relative;
  display: inline-block;
  min-width: 260px;
  max-height: inherit;
  border-radius: 260px;
  overflow: hidden;
  transform: translateY(-35px);
  transition: all 250ms;
  z-index: 1;
}
.two:hover:before {
  background-color: yellow;
  transform: scale(0.9);
}
.two:hover:after {
  opacity: .5;
}
.two:hover img {
  transform: translateY(-30px);
}

.three {
  position: relative;
}
.three:before, .three:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transition: all 250ms;
}
.three:before {
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
}
.three:after {
  content: attr(data-name);
  display: block;
  width: 260px;
  height: calc(260px - 30%);
  padding-top: 30%;
  border-radius: 260px;
  overflow: hidden;
  color: #fff;
  font: bold 76px "SF UI Text","Helvetica Neue";
  text-transform: uppercase;
}
.three img {
  position: relative;
  display: inline-block;
  top: 0;
  border-radius: 260px;
  overflow: hidden;
  transition: all 250ms;
  z-index: 1;
}
.three:hover:before {
  background-color: yellow;
}
.three:hover:after {
  content: attr(data-name);
  height: calc(260px - 75%);
  padding-top: 75%;
  color: #444;
  font-size: 30px;
}
.three:hover img {
  max-width: calc(260px / 2);
  max-height: calc(260px / 2);
  background-color: #fff;
  top: 20%;
}

.four {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.four:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
  transition: all 250ms;
}
.four img {
  position: relative;
  display: inline-block;
  transition: all 4s;
  z-index: 1;
  overflow: hidden;
}
.four:hover:before {
  background-color: yellow;
}
.four:hover img {
  transform: translateX(-10%);
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="col">
	<figure class="one">
		<img src="https://www.lisec.com/fileadmin/_processed_/csm_fehringer-thomas_f826143af8.png" alt="" />
	</figure>
</div>

<div class="col">
	<figure class="two">
		<img src="http://cdn.macrumors.com/article-new/2013/11/TimCook.png" alt="" />
	</figure>
</div>

<div class="col">
	<figure class="three" data-name="Jack">
		<img src="http://www.hiscoxlondonmarket.com/sites/default/files/styles/profile_views_image/public/Richard%20Golder.png?itok=fFTt4SdC" alt="" />
	</figure>
</div>

<div class="col">
	<figure class="four">
		<img src="http://www.hiscoxlondonmarket.com/sites/default/files/styles/profile_views_image/public/Nick-Waddell.png?itok=bns25rIT" alt="" />
	</figure>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/haibnu/profile-hover-effects-jrBXBy */
body {
  text-align: center;
  padding-top: 40px;
}

.col {
  float: left;
  width: 50%;
  margin-bottom: 40px;
}

figure {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 260px;
  width: 260px;
  height: 260px;
  transition: all 250ms;
}
figure img {
  max-width: 260px;
  max-height: 260px;
}

.one {
  position: relative;
  z-index: 1;
}
.one:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
  transform: scale(1);
  transition: all 250ms;
}
.one img {
  position: relative;
  display: inline-block;
  z-index: 1;
  overflow: hidden;
  max-height: 260px;
  max-width: 260px;
  border-radius: 260px;
}
.one:hover:before {
  background-color: yellow;
  transform: scale(1.1);
}

.two {
  position: relative;
  text-align: center;
}
.two:before, .two:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transition: all 250ms;
}
.two:before {
  width: 250px;
  height: 250px;
  border-radius: 250px;
  background-color: lightgrey;
}
.two:after {
  width: 70%;
  left: 15%;
  height: 5px;
  top: 105%;
  border-radius: 100%;
  background-color: grey;
  filter: blur(5px);
  opacity: .3;
}
.two img {
  position: relative;
  display: inline-block;
  min-width: 260px;
  max-height: inherit;
  border-radius: 260px;
  overflow: hidden;
  transform: translateY(-35px);
  transition: all 250ms;
  z-index: 1;
}
.two:hover:before {
  background-color: yellow;
  transform: scale(0.9);
}
.two:hover:after {
  opacity: .5;
}
.two:hover img {
  transform: translateY(-30px);
}

.three {
  position: relative;
}
.three:before, .three:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transition: all 250ms;
}
.three:before {
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
}
.three:after {
  content: attr(data-name);
  display: block;
  width: 260px;
  height: calc(260px - 30%);
  padding-top: 30%;
  border-radius: 260px;
  overflow: hidden;
  color: #fff;
  font: bold 76px "SF UI Text","Helvetica Neue";
  text-transform: uppercase;
}
.three img {
  position: relative;
  display: inline-block;
  top: 0;
  border-radius: 260px;
  overflow: hidden;
  transition: all 250ms;
  z-index: 1;
}
.three:hover:before {
  background-color: yellow;
}
.three:hover:after {
  content: attr(data-name);
  height: calc(260px - 75%);
  padding-top: 75%;
  color: #444;
  font-size: 30px;
}
.three:hover img {
  max-width: calc(260px / 2);
  max-height: calc(260px / 2);
  background-color: #fff;
  top: 20%;
}

.four {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.four:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 260px;
  height: 260px;
  border-radius: 260px;
  background-color: lightgrey;
  transition: all 250ms;
}
.four img {
  position: relative;
  display: inline-block;
  transition: all 4s;
  z-index: 1;
  overflow: hidden;
}
.four:hover:before {
  background-color: yellow;
}
.four:hover img {
  transform: translateX(-10%);
}

Comments