Profile Card com Efeito Toogle Jquery e Css
Postado: 22 de agosto de 2021
Tempo de Leitura: < 1 Minuto
Profile Card com Efeito Toogle Jquery e Css
Neste artigo vamos criar um Profile card com efeito tootle Jquery e css.
vamos adicionar o Html:
<figure class="profile">
<img src="uploads/perfil.jpg" alt="perfil.jpg" />
<figcaption>
<h3>Loop Nerd</h3>
<div class="icons"><a href="#"><i class="ion-social-twitter"></i></a>
<a href="#"> <i class="icon icon-twitter"></i></a>
<a href="#"> <i class="icon icon-pinterest"></i></a>
</div>
</figcaption>
<div class="sobre">
<span class="abrePerfil"> <i class="icon icon-circle-o"></i> Perfil</span>
<p class="myTexto">
Olá, Sejam bem-vindos<br>
Loop Nerd é um blog que posta artigos em formato de Códigos Html, css, Jquery e Design Responsivo.
</p>
</div>
</figure>
Vamos adicionar o Css:
.profile {
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
display: inline-block;
margin: 40px 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000;
text-align: left;
font-size: 16px;
background: #fff;
border-radius: 8px;
box-shadow: 1px 1px 2px 0px #cacaca;
}
.profile *,
.profile:before,
.profile:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.profile img {
max-width: 35%;
margin-top: -20px;
margin-left: 5%;
margin-bottom: 15px;
backface-visibility: hidden;
vertical-align:top;
border-radius:100%;
border: 2px #0cced7 solid;
}
.profile figcaption {
position: absolute;
top: 0;
right:0;
left:40%;
bottom:0;
padding:10px;
}
.profile h3 {
margin: 0;
font-size: 1.1em;
font-weight: normal;
}
.profile .icons {
font-size: 1.6rem;
}
.profile .icons a {
color: #333;
text-decoration:none;
}
.profile .icons a:hover {
color: #0cced7;
}
.sobre {
width:100%;
float:left;
background-color: #0cced7;
padding: 10px 20px;
border-top: 1px #e8e8e8 solid;
border-radius: 0px 0px 8px 8px;
z-index:1;
}
.sobre span {
width:100%;
float:left;
color:#fff;
font-size:16px;
font-family:'open_sansbold';
position:relative;
z-index:1;
cursor:pointer;
}
.sobre p {
width:100%;
overflow:hidden;
float:left;
color:#fff;
font-size:14px;
font-family:'open_sansregular';
display:none;
}
.sobre .ativo { color:#000; }
Para dar o efeito Toogle vamos adicionar o Script.
<script type="text/javascript">
$(document).ready(function(){
$('.abrePerfil').click(function () {
$(this).find('i').toggleClass('icon-circle-o icon-circle');
if (!$(this).hasClass('ativo')) {
$(this).addClass('ativo');
$('p').slideDown('fast');
} else {
$(this).removeClass('ativo');
$('p').slideUp('fast');
}
});
});
</script>
Veja o resultado:
Baixar Código
Veja Funcionando
Publicado por: Loop Nerd
1.105 Visualizações
Deixe um comentário