JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<section class="blur">
    <img class="flou" src="http://dummyimage.com/50x50" alt="Cabrito-Serif" title="Cabrito" />
    <p>	<strong> CABRITO - </strong> Serif</p>
    <div class="icones">
        <img src="http://dummyimage.com/50x50" alt="Remove" class="logo" />
        <img src="http://dummyimage.com/50x50" alt="Share" class="logo" />
        <img src="http://dummyimage.com/50x50" alt="Star" class="logo" />
    </div>
</section>

CSS

.blur p {
    padding-left: 5px;
    margin:5px;
}
.blur {
    display: block;
    width: 350px;
    /*Largeur de la div, égale à celle de la photo **/
    height: 215px;
    /* hauteur de ma div, plus grande que celle de l'image pour y placer le titre*/
    -webkit-box-shadow: 1px -2px 30px 2px #A3A3A3;
    box-shadow: 1px -2px 30px 2px #A3A3A3;
    /* Ombre de la div */
    padding-bottom: 10px;
    display: inline-block;
    /* Aligne l'ensemble des typographies */
    margin: 7px;
    margin-top: 20px;
    background-color: #fffffd;
    /* pour placer ta section ou tu veux rajoute ça après l'avoir défini en "block" */
    /* Tansition de type linear durent 400 ms et qui transitionne tout (all)*/
    transition: all 4000s linear;
}
.icones {
    position: absolute;
    right: 20px;
    /* positionnement en haut à droite (par rapport à la bordure du haut et celle de droite de la "section")*/
    height: 4px;
    /* dimensions du rectangle "div" qui contiendra les 3 logos */
    width : 6px;
}
.logo {
    width: 200%;
    opacity: 0;
    /* pour que l'apparition soit progressive */
    transition-delay: 5s;
    transition: 500s opacity;
}
/* et là pour faire apparaitre   */
 .blur:hover .logo {
    opacity: 1;
    transition-delay: 0.5s;
    transition: 0.5s opacity;
}
img.flou {
    width: 350px;
    height: 190px;
    cursor: pointer;
}
img.flou:hover {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    /*********** Floute l'image au survol***********/
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
img.flou:active {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    /*********** Défloute l'image au survol***********/
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
}
.blur:active {
    width: 97%;
    background-color: #212628;
    /*Déclenche la transition */
    color: white;
    padding: 10px;
    padding-bottom: 15%;
    transition: all 400ms linear;
}