Animation bloc

Animations blocs

Retour

Dézoomer au survol : modifier le numéro du module

.module-bloc-graphic-133  .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-133 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-133 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-image img, .module-bloc-graphic-133 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-image img {

width:100%;
margin-top:0%;
margin-left:0%;
transform:scale(0.9);
}

1.

.module-bloc-graphic-137 .module-bloc-graphic-item-plus, .module-bloc-graphic-137 .module-bloc-graphic-item-commentaire {
display:none;
}

.module-bloc-graphic-137 .module-bloc-graphic-item-texte {
background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.027) 9.2%, rgba(0,0,0,0.078) 17.3%, rgba(0,0,0,0.137) 24.8%, rgba(0,0,0,0.201) 31.9%, rgba(0,0,0,0.268) 38.8%, rgba(0,0,0,0.336) 45.4%, rgba(0,0,0,0.407) 51.9%, rgba(0,0,0,0.479) 58.3%, rgba(0,0,0,0.551) 64.5%, rgba(0,0,0,0.624) 70.6%, rgba(0,0,0,0.699) 76.7%, rgba(0,0,0,0.774) 82.7%, rgba(0,0,0,0.849) 88.6%, rgba(0,0,0,0.925) 94.4%, #000 100%);
bottom:-65px;
}

.module-bloc-graphic-137 .module-bloc-graphic-item-titre {
transform:translate(0% 0%);
transition:all 0.2s ease-in-out;
color:white;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.1em;
}

.module-bloc-graphic-137 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre, .module-bloc-graphic-137  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre {
opacity:1;
}

.module-bloc-graphic-137 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-137  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
transform:translate(0%, -10%);
transition:all 0.2s ease-in-out;
opacity:1;
}

2.

.module-bloc-graphic-138 .module-bloc-graphic-item-plus, .module-bloc-graphic-138 .module-bloc-graphic-item-commentaire {
display:none;
}

.module-bloc-graphic-138 .module-bloc-graphic-item-texte {
position:absolute;
transform-origin:50% 50%;
transform:scale(0.1);
transition:.7s ease;
right:-35em;
bottom:-35em;
clip-path:circle(70.3% at 72% 71%);
}

.module-bloc-graphic-138 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre, .module-bloc-graphic-138  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre {
color:white;
}

.module-bloc-graphic-138 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-138  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
opacity:1;
background-color:rgba(156 2 9 / 63%);
transform:scale(2);
transition:.7s ease;
right:0em;
bottom:0em;
}

3.

.module-bloc-graphic-139 .module-bloc-graphic-item-plus, .module-bloc-graphic-139 .module-bloc-graphic-item-commentaire {
display:none;
}

.module-bloc-graphic-139 .module-bloc-graphic-item-titre {
color:white;
}

.module-bloc-graphic-139 .module-bloc-graphic-item-texte {
position:absolute;
transform-origin:50% 50%;
clip-path:circle(70.3% at 72% 71%);
transform:scale(2);
transition:.7s ease;
right:0em;
bottom:0em;
background-color:rgba(156 2 9 / 63%);
}

.module-bloc-graphic-139 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre, .module-bloc-graphic-139  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre {
color:white;
}

.module-bloc-graphic-139 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-139 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
opacity:1;
background-color:rgba(156 2 9 / 63%);
transform:scale(0.1);
transition:.7s ease;
right:-35em;
bottom:-35em;
}

4.

.module-bloc-graphic-140 .module-bloc-graphic-item-plus {
display:none;
}

.module-bloc-graphic-140 .module-bloc-graphic-item-titre {
color: white;
font-size: 2em;
margin-top: 1em;
}

.module-bloc-graphic-140 .module-bloc-graphic-item-texte {
position: absolute;
transform-origin: 50% 50%;
clip-path: circle(5% at 50% 50.5%);
background-color: red;
bottom:-16em;
right:-19em;
transition: .7s ease;
}

.module-bloc-graphic-140 .module-bloc-graphic-item-commentaire {
color:black;
margin-top:-2em;
}

.module-bloc-graphic-140 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre, .module-bloc-graphic-140 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre {
color:red;
opacity:0;
}

.module-bloc-graphic-140 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre::after, .module-bloc-graphic-140 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte .module-bloc-graphic-item-titre::after {
opacity:1 !important;
}

.module-bloc-graphic-140 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-140  .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
opacity:1;
background-color:rgb(255 255 255 / 63%);
transform:scale(2);
right:0em;
bottom:0em;
clip-path:circle(70% at 50% 50%);
transition:.7s ease;
}

5.

.module-bloc-graphic-141 .module-bloc-graphic-item-plus {
display:none;
}

.module-bloc-graphic-141 .module-bloc-graphic-item-texte {
outline:#ffffff solid 1px;
outline-offset:0;
opacity:0;
}

.module-bloc-graphic-141 .module-bloc-graphic-item-titre {
color:white;
font-size:20px;
letter-spacing:0.2em;
text-transform:uppercase;
}

.module-bloc-graphic-141 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-141 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
opacity:1;
outline-offset:-2em;
background-color:#0000005e;
}

6.

.module-bloc-graphic-142 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte:after, .module-bloc-graphic-142 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte:before {
-webkit-transform:scale(1,1);
}

.module-bloc-graphic-142 .module-bloc-graphic-item-plus {
display:none;
}

.module-bloc-graphic-142 .module-bloc-graphic-item-texte:after {
border-right:1px solid #fff;
border-left:1px solid #fff;
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
content:'';
-webkit-transition:all 0.35s;
-webkit-transform:scale(1,0);
}

.module-bloc-graphic-142 .module-bloc-graphic-item-texte:before {
border-top:1px solid #fff;
border-bottom:1px solid #fff;
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
content:'';
-webkit-transition:all 0.35s;
-webkit-transform:scale(0,1);
}

.module-bloc-graphic-142 .module-bloc-graphic-item-titre {
color:white;
font-size:20px;
letter-spacing:0.2em;
text-transform:uppercase;
}

.module-bloc-graphic-142 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-142 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte {
opacity:1;
outline-offset:-2em;
background-color:#0000005e;
}

7.

.module-bloc-graphic-150 .module-bloc-graphic-item { margin:10px; transition:overflow 0.4s ease; (min-width 980px) width:calc(50% - 20px); (min-width 1200px) width:calc(25% - 20px); } .module-bloc-graphic-150 .module-bloc-graphic-item-commentaire { (min-width 1200px) padding:5px; (min-width 1600px) padding:10px; } .module-bloc-graphic-150 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-image img, .module-bloc-graphic-150 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-image img { (min-width 980px) width:100%; margin-top:0; margin-left:0; } .module-bloc-graphic-150 .module-bloc-graphic-item-plus { display:none; } .module-bloc-graphic-150 .module-bloc-graphic-item-texte { color:white; (max-width:470px) background-color:#000036; opacity:0.8; (min-width:470px) and (max-width:980px) background-color:#000036; opacity:0.8; (min-width 980px) z-index:1; top:40%; right:40%; (min-width 1200px) top:25%; right:35%; }

.module-bloc-graphic-150 .module-bloc-graphic-item-texte::before { (min-width 980px) z-index:-1; bottom:-20%; left:-20%; width:250px; height:250px; opacity:.8; background-color:#000036; transform:rotate(45deg); transition:opacity .6s ease-in-out; content:""; display:block; position:absolute; (min-width 1200px) bottom:-20%; left:-20%; width:120%; height:120%; (min-width 1600px) bottom:-20%; left:-20%; width:250px; height:250px; } .module-bloc-graphic-150 .module-bloc-graphic-item:hover { overflow:visible; } .module-bloc-graphic-150 .module-bloc-graphic-item:hover > .module-bloc-graphic-item-texte, .module-bloc-graphic-150 .module-bloc-graphic-item-image-click:hover > .module-bloc-graphic-item-texte { (min-width 980px) opacity:1; transition:all .4s ease-in-out; } .module-bloc-graphic-150 .module-bloc-graphic-item:hover:before { transform:rotate(4deg); }

RETOUR