Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

Animating caption CSS Grid

Code :

HTML


<ul class="cadre-demo">
<li class="card" tabindex="0">
<span class=card-caption>
<img src='votreimage.jpg' alt>
<span class=caption>
<a href="#!">En savoir plus</a>
</span>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo velit, lacinia ac malesuada eget, pulvinar a enim. Vestibulum tincidunt ullamcorper ante, nec maximus turpis viverra vitae. Pellentesque ultricies volutpat lectus et malesuada. Vestibulum eget erat eget tortor rhoncus auctor.</p>
</li>
...
</ul>

CSS


*{box-sizing: border-box}

.cadre-demo {
 
list-style: none;
padding: 0 1rem;
display: grid;
margin:2rem auto;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
grid-gap: 2rem;



}
	
	
.card {	
	
--card-gradient:248 78% 62%;
--card-gradient-1:180 64% 53%;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
padding-bottom: 1rem;
overflow: hidden;
}
	
.card:focus {
 outline: none;
}
	
	
	
.card-caption{ 
	
max-height: max(9.5rem, 30vh);
display: grid;
grid-template-areas: "card";
overflow: hidden;

	}


	
	
.card-caption img,
.caption{

grid-area: card;

}
	
	

	
.card-caption:hover .caption,
.card-caption:focus .caption{

transform: translateY(0)

}
	

	
.card-caption img {

border-radius: 0.5rem 0.5rem 0 0;
width: 100%;
object-fit: cover;
height: 30vh;
display: block

}


.card span ~ * {

  margin-left: 1rem;
  margin-right: 1rem;
  
}

	
.card > :last-child {

  margin-bottom: 0;
  
}


.caption{
transform: translateY(100%);
transition: var(--tr) transform .6s ease-in;
will-change: transform;
display: grid;
place-items: center;
background: linear-gradient(45deg,hsl(var(--card-gradient)/.6),hsl(var(--card-gradient-1)/.6));
backdrop-filter: blur(2px);

 }

	
.caption a {

text-decoration: none;
background-color: hsl(var(--card-gradient));
color: hsl(0, 0%, 100%);
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
min-width: 10ch;
padding: 0 0.75em;
transition: .2s all ease-in-out;
}
	

.caption a:hover, 
.caption a:active{
 
	--card-gradient: 248 100% 60%;
}
	

.caption a:focus {

  box-shadow: 0 0 0 4px hsl(248 100% 48%);
	
}	


Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.