Hình đại diện dạng social network

  Bài viết hay nhất1
HTML:

<body>
<div class="profil trans">
<div class="profil-bild trans">
</div>
<div class="profil-back trans">
</div>
<div class="profil-name trans">
Thomas Ronaldo
</div>
<div class="profil-content">
Position: forward line</br>
Nickname: Ronaldo</br>
Favorite Team: FC Barcelona
</div>
<div class="profil-mannschaft">
1
</div>
<div class="profil-plus trans">
+
</div>
</div>
</body>



CSS:


@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700);
body {
background-color: #222;
color: #c61618;
font-family: 'Titillium Web', sans-serif;
}

.trans {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}

.profil {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
background-color: #fff;
margin: 50px auto;
border: 0;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}

.profil-back {
position: absolute;
top: 3px;
height: 160px;
width: 160px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

.profil-bild {
z-index: 3;
position: absolute;
height: 150px;
width: 150px;
top: 8px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
background-size: cover;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/214624/soccer-2138267_960_720.jpg');
}

.profil.active {
height: 400px;
}

.profil.active .profil-bild {
height: 200px;
width: 200px;
top: 0px;
border-radius: 0%;
}

.profil-name {
position: absolute;
bottom: 0;
font-size: 14px;
width: 100%;
color: #fff;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 7px 0;
}

.profil-content {
position: absolute;
top: 220px;
left: 10px;
font-size: 14px;
color: #fff;
}

.profil-mannschaft {
position: absolute;
font-size: 150px;
opactiy: 0.1;
color: rgba(20, 20, 20, 0.3);
z-index: -1;
line-height: 1;
bottom: 15px;
width: 100%;
text-align: center;
}

.profil-plus {
font-weight: 300;
z-index: 4;
position: absolute;
font-size: 30px;
height: 18px;
width: 30px;
padding-top: 12px;
line-height: 0;
text-align: center;
border-radius: 100%;
color: #fff;
background-color: #c61618;
top: 140px;
right: 0;
left: 0;
margin: 0 auto;
}

.profil.active .profil-plus {
top: 185px;
right: -140px;
transform: rotate(405deg);
-webkit-transform: rotate(405deg);
background-color: #c61618;
}



JS:

$(".profil").click(function() {
$(this).toggleClass("active");
});
Bạn không có quyền trả lời bài viết