Un code simple permettant de mettre en action un déplacement au survole de la souris
Rien de bien compliqué mais utile si l’on souhaite faire du code léger et donner à son site quelques petites animations. le code est téléchargeable en bas de page
HTML
<!--
///////////////////////////////////
Pix-Card By Pix'Ailes-Design
www.pixailes-design.fr
///////////////////////////////////
-->
<div class="pix-card">
<div class="pix-card-img">
</div>
<div class="pix-card-text">
<p>ligne de texte</p>
<p>ligne de texte</p>
<p>ligne de texte</p>
<p>ligne de texte</p>
<p>ligne de texte</p>
<a class="pix-button" href="#" >En savoir +</a>
</div>
</div>CSS
<style>body{font-family: "Gill Sans", sans-serif;font-weight: 800;font-size:16px;}
.pix-card{
margin:100px;
width:200px;
height:auto;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
text-align:center;
line-height: 8px;
}
.pix-card-img{
border-radius: 20px 20px 0 0;
width:auto;
height:125px;
background-image: url("img/pix-ailesV2022-200-card.png");
background-position: top;
background-size: contain;
}
.pix-card-text{
padding: 20px 10px 10px 10px;
border-radius: 20px 20px 0 0;
height:200px;
background-color:white;
position:relative;
top:-70px;
z-index:1000;
transition: all 1s ease;
}
.pix-button{
padding:8px 16px 8px 16px;
background-color:#353535;
color:white;
text-decoration:none;
position:relative;
bottom:-60px;
}
.pix-button:hover{background-color:#656565; transition: all 1s ease;}
.pix-card-text:hover{top:-10px;height:180px;border-radius:0}
</style>