Hover over the profile photo to expand it into a neat profile card.
A Pen by HARUN PEHLİVAN on CodePen.
Created
June 5, 2021 19:42
-
-
Save harunpehlivan/b42b0e9d7639574d03abb1951a56d6c4 to your computer and use it in GitHub Desktop.
Hover over the profile photo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet" type="text/css"> | |
| <div id="profile-wrap"> | |
| <div class="pulse1"></div> | |
| <div class="pulse2"></div> | |
| <div class="profile-overlay"></div> | |
| <div class="profile-image"></div> | |
| <div class="profile-name"> | |
| <h2>Hi, I'm HARUN <br>PEHLİVAN<span>HP IT GROUP (TEBIM TEBITAGEM) TTGRT FOUNDER CEO</span></h2> | |
| </div> | |
| <div class="profile-social"> | |
| <ul> | |
| <li><a href="https://facebook.com/100008152065270" data-toggle="tooltip" title="facebook" target="_blank"><i class="fa fa-facebook"></i></a></li> | |
| <li><a href="https://www.instagram.com/harunpehlivantebimtebitagem/" data-toggle="tooltip" title="instagram" target="_blank"><i class="fa fa-instagram"></i></a></li> | |
| <li><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" data-toggle="tooltip" title="linkedin" target="_blank"><i class="fa fa-linkedin"></i></a></li> | |
| <li><a href="https://codepen.io/harunpehlivan" data-toggle="tooltip" title="Codepen" target="_blank"><i class="fa fa-codepen"></i></a></li> | |
| <li><a href="https://hpitgroup.glitch.me/" data-toggle="tooltip" title="Website" target="_blank"><i class="fa fa-link"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| background: linear-gradient(135deg,#3b0d4a 0%,#7b1733 100%); | |
| font-family: 'Raleway', sans-serif; | |
| overflow-y: scroll; | |
| } | |
| #profile-wrap { | |
| position: absolute; | |
| margin: 0 auto; | |
| top: 0; bottom: 0; left: 0; right: 0; | |
| text-align: center; | |
| height: 460px; | |
| width: 450px; | |
| z-index: 5; | |
| } | |
| .profile-overlay { | |
| position: absolute; | |
| margin: 0 auto; | |
| margin-top: 10px; | |
| top: 0; bottom: 0; left: 0; right: 0; | |
| z-index: 2; | |
| border-radius: 50%; | |
| display: block; | |
| width: 280px; | |
| height: 280px; | |
| -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.4); | |
| box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.4); | |
| } | |
| .profile-image { | |
| position: absolute; | |
| margin: 0 auto; | |
| margin-top: 10px; | |
| top: 0; bottom: 0; left: 0; right: 0; | |
| z-index: 0; | |
| display: block; | |
| height: 280px; | |
| width: 280px; | |
| border-radius: 50%; | |
| background: url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1613759952/003_megvxx.jpg) 0 -20px; | |
| background-size: 100%; | |
| overflow: hidden; | |
| transition: all ease 0.3s; | |
| } | |
| #profile-wrap:hover .profile-image { | |
| background-position: 0 -29px; | |
| border-radius: 0; | |
| margin-top: -15px; | |
| height: 460px; | |
| width: 320px; | |
| z-index: 1; | |
| } | |
| #profile-wrap:hover .profile-name h2 { | |
| font-size: 36px; | |
| margin-top: 280px; | |
| } | |
| #profile-wrap:hover .profile-name h2 span { | |
| opacity: 0; | |
| } | |
| #profile-wrap:hover .profile-social { | |
| opacity: 1; | |
| margin-top: -35px; | |
| } | |
| #profile-wrap:hover .pulse1{ | |
| border: 2px solid rgba(255, 255, 255, 0); | |
| box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 0); | |
| } | |
| #profile-wrap:hover .pulse2{ | |
| border: 10px solid rgba(0, 0, 0, 0); | |
| box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, 0); | |
| } | |
| .profile-name h2 { | |
| position: relative; | |
| padding: 15px; | |
| text-transform: uppercase; | |
| font-size: 46px; | |
| font-weight: 800; | |
| color: #fff; | |
| margin: 0; | |
| margin-top: 295px; | |
| z-index: 5; | |
| transition: all ease 0.3s; | |
| } | |
| .profile-name h2 span { | |
| color: #ccc; | |
| font-size: 18px; | |
| display: block; | |
| font-weight: 400; | |
| margin: 5px; | |
| transition: all ease 0.3s; | |
| } | |
| .profile-social { | |
| position: relative; | |
| opacity: 0; | |
| transition: all ease 0.3s; | |
| padding: 0 0 20px 0; | |
| z-index: 5; | |
| } | |
| .profile-social ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .profile-social ul li { | |
| display: inline-block; | |
| margin: 0; | |
| } | |
| .profile-social ul li a { | |
| width: 40px; | |
| height: 40px; | |
| display: block; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 40px; | |
| font-size: 20px; | |
| background: #303030; | |
| color: white; | |
| } | |
| .profile-social ul li a:hover { | |
| background: #7b1733; | |
| } | |
| .pulse1 { | |
| position: absolute; | |
| width: 270px; | |
| height: 270px; | |
| margin: auto; | |
| top: -158px; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 2; | |
| opacity: 0; | |
| border: 2px solid rgba(255, 255, 255, .1); | |
| -webkit-animation: pulsejg1 4s linear infinite; | |
| animation: pulsejg1 4s linear infinite; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6); | |
| box-sizing: border-box; | |
| transition: all ease 0.8s; | |
| } | |
| .pulse2 { | |
| position: absolute; | |
| width: 260px; | |
| height: 260px; | |
| margin: auto; | |
| top: -158px; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 2; | |
| opacity: 0; | |
| border: 10px solid rgba(0, 0, 0, .4); | |
| -webkit-animation: pulsejg2 4s linear infinite; | |
| animation: pulsejg2 4s linear infinite; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8); | |
| box-sizing: border-box; | |
| transition: all ease 0.8s; | |
| } | |
| @-webkit-keyframes pulsejg1 { | |
| 0% { | |
| -webkit-transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 50% { | |
| -webkit-transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 60% { | |
| -webkit-transform: scale(.9); | |
| opacity: .1 | |
| } | |
| 70% { | |
| -webkit-transform: scale(1.1); | |
| opacity: .25 | |
| } | |
| 80% { | |
| -webkit-transform: scale(1.25); | |
| opacity: .1 | |
| } | |
| 100% { | |
| -webkit-transform: scale(1.4); | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes pulsejg1 { | |
| 0% { | |
| transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 50% { | |
| transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 60% { | |
| transform: scale(.9); | |
| opacity: .1 | |
| } | |
| 70% { | |
| transform: scale(1.1); | |
| opacity: .25 | |
| } | |
| 80% { | |
| transform: scale(1.25); | |
| opacity: .1 | |
| } | |
| 100% { | |
| transform: scale(1.4); | |
| opacity: 0 | |
| } | |
| } | |
| @-webkit-keyframes pulsejg2 { | |
| 0% { | |
| -webkit-transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 40% { | |
| -webkit-transform: scale(.8); | |
| opacity: .05 | |
| } | |
| 50% { | |
| -webkit-transform: scale(1); | |
| opacity: .1 | |
| } | |
| 60% { | |
| -webkit-transform: scale(1.1); | |
| opacity: .3 | |
| } | |
| 80% { | |
| -webkit-transform: scale(1.2); | |
| opacity: .1 | |
| } | |
| 100% { | |
| -webkit-transform: scale(1.3); | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes pulsejg2 { | |
| 0% { | |
| transform: scale(.6); | |
| opacity: 0 | |
| } | |
| 40% { | |
| transform: scale(.8); | |
| opacity: .05 | |
| } | |
| 50% { | |
| transform: scale(1); | |
| opacity: .1 | |
| } | |
| 60% { | |
| transform: scale(1.1); | |
| opacity: .3 | |
| } | |
| 80% { | |
| transform: scale(1.2); | |
| opacity: .1 | |
| } | |
| 100% { | |
| transform: scale(1.3); | |
| opacity: 0 | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment