Tutoriels Email

Plugins effet de survol

EFFETS DE SURVOL

Qui vont vous étonner !

Vous trouverez des codes à copier sur vos réalisations Webacappella,
à l'aide de JavaScript et CSS/HTML.

Tutoriels vidéo

play

EFFET SURVOL 01 "snip "

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<figure class="snip1256"> <img src="wa_res/icons/business-g7a94522c6_640.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" alt="sample20"/> <figcaption> <h3>MACAO VOTRE TITRE</h3> <p>Macao est une région autonome de la côte sud de la Chine continentale, dans le delta de la rivière des Perles, en face de Hong Kong. Territoire portugais jusqu'en 1999, elle mêle différentes influences culturelles.</p><a href="https://wa-fusion.fr/" class="read-more">Informations</a> </figcaption> </figure>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                figure.snip1256 { font-family: 'Raleway'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 999px; max-height: 350px; width: 100%; color: #ffffff; text-align: left; background-color: #6102a1; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; } figure.snip1256 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1256 img { opacity: 1; width: 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } figure.snip1256 figcaption { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; transform-origin: 50% -50%; z-index: 1; opacity: 0; padding: 20px 30px; } figure.snip1256 h3, figure.snip1256 p { line-height: 1.5em; } figure.snip1256 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1256 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1256 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1256 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1256:hover img, figure.snip1256.hover img { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } figure.snip1256:hover figcaption, figure.snip1256.hover figcaption { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

EFFET SURVOL 02 "move down"

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<figure class="snip1482">
                                                                  <figcaption>
                                                                    <h2>Norman Gordon</h2>
                                                                    <p>You don't get to be mom if you can't fix everything just right.</p>
                                                                  </figcaption>
                                                                  <a href="#"></a><img src="wa_res/icons/AASLIDE_04.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" alt="sample45" />
                                                                </figure>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .snip1482 {
                                                                  font-family: 'Raleay';
                                                                  position: relative;
                                                                  margin: 10px 20px;
                                                                  min-width: 230px;
                                                                  max-width: 999px;
                                                                  min-height: 350px;
                                                                  width: 100%;
                                                                  color: #ffffff;
                                                                  text-align: right;
                                                                  line-height: 1.4em;
                                                                  background-color: #1a1a1a;
                                                                  font-size: 16px;
                                                                }
                                                                .snip1482 * {
                                                                  -webkit-box-sizing: border-box;
                                                                  box-sizing: border-box;
                                                                  -webkit-transition: all 0.35s ease;
                                                                  transition: all 0.35s ease;
                                                                }
                                                                .snip1482 img {
                                                                  position: absolute;
                                                                  right: 0%;
                                                                  top: 50%;
                                                                  opacity: 1;
                                                                  width: 100%;
                                                                  -webkit-transform: translate(0%, -50%);
                                                                  transform: translate(0%, -50%);
                                                                }
                                                                .snip1482 figcaption {
                                                                  position: absolute;
                                                                  width: 50%;
                                                                  top: 50%;
                                                                  left: 0;
                                                                  -webkit-transform: translateY(-50%);
                                                                  transform: translateY(-50%);
                                                                  padding: 20px 0 20px 20px;
                                                                }
                                                                .snip1482 h2,
                                                                .snip1482 p {
                                                                  margin: 0;
                                                                  width: 100%;
                                                                  -webkit-transform: translateX(20px);
                                                                  transform: translateX(20px);
                                                                  opacity: 0;
                                                                }
                                                                .snip1482 h2 {
                                                                  font-family: 'Playfair Display', Arial, sans-serif;
                                                                  text-transform: uppercase;
                                                                  margin-bottom: 5px;
                                                                }
                                                                .snip1482 p {
                                                                  font-size: 0.8em;
                                                                }
                                                                .snip1482 a {
                                                                  position: absolute;
                                                                  top: 0;
                                                                  bottom: 0;
                                                                  left: 0;
                                                                  right: 0;
                                                                  z-index: 1;
                                                                }
                                                                .snip1482:hover img,
                                                                .snip1482.hover img {
                                                                  width: 55%;
                                                                  right: -10%;
                                                                }
                                                                .snip1482:hover figcaption h2,
                                                                .snip1482.hover figcaption h2,
                                                                .snip1482:hover figcaption p,
                                                                .snip1482.hover figcaption p {
                                                                  -webkit-transform: translateX(0px);
                                                                  transform: translateX(0px);
                                                                  opacity: 1;
                                                                }

EFFET SURVOL 03 "case blanche"

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <figure class="snip1321"><img src="wa_res/icons/ASLIDE_02.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" alt="sq-sample26"/>
                                                                  <figcaption><i class="ion-upload"></i>
                                                                    <h4>WA-FUSION.fr</h4>
                                                                    <h2>Luis Santos</h2>
                                                                  </figcaption><a href="#"></a>
                                                                </figure>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
                                                                figure.snip1321 {
                                                                  font-family: 'Ropa Sans';
                                                                  position: relative;
                                                                  overflow: hidden;
                                                                  margin: 10px;
                                                                  width: auto;
                                                                  color: #000000;
                                                                  text-align: center;
                                                                  -webkit-perspective: 50em;
                                                                  perspective: 50em;
                                                                }
                                                                figure.snip1321 * {
                                                                  -webkit-box-sizing: padding-box;
                                                                  box-sizing: padding-box;
                                                                  -webkit-transition: all 0.2s ease-out;
                                                                  transition: all 0.2s ease-out;
                                                                }
                                                                figure.snip1321 img {
                                                                  max-width: 100%;
                                                                  vertical-align: top;
                                                                }
                                                                figure.snip1321 figcaption {
                                                                  top: 50%;
                                                                  left: 20px;
                                                                  right: 20px;
                                                                  position: absolute;
                                                                  opacity: 0;
                                                                  z-index: 1;
                                                                }
                                                                figure.snip1321 h2,
                                                                figure.snip1321 h4 {
                                                                  margin: 0;
                                                                }
                                                                figure.snip1321 h2 {
                                                                  font-weight: 600;
                                                                }
                                                                figure.snip1321 h4 {
                                                                  font-weight: 400;
                                                                  text-transform: uppercase;
                                                                }
                                                                figure.snip1321 i {
                                                                  font-size: 32px;
                                                                }
                                                                figure.snip1321:after {
                                                                  background-color: #ffffff;
                                                                  position: absolute;
                                                                  content: "";
                                                                  display: block;
                                                                  top: 20px;
                                                                  left: 20px;
                                                                  right: 20px;
                                                                  bottom: 20px;
                                                                  -webkit-transition: all 0.4s ease-in-out;
                                                                  transition: all 0.4s ease-in-out;
                                                                  -webkit-transform: rotateX(-90deg);
                                                                  transform: rotateX(-90deg);
                                                                  -webkit-transform-origin: 50% 50%;
                                                                  -ms-transform-origin: 50% 50%;
                                                                  transform-origin: 50% 50%;
                                                                  opacity: 0;
                                                                }
                                                                figure.snip1321 a {
                                                                  left: 0;
                                                                  right: 0;
                                                                  top: 0;
                                                                  bottom: 0;
                                                                  position: absolute;
                                                                  z-index: 1;
                                                                }
                                                                figure.snip1321:hover figcaption,
                                                                figure.snip1321.hover figcaption {
                                                                  -webkit-transform: translateY(-50%);
                                                                  transform: translateY(-50%);
                                                                  opacity: 1;
                                                                  -webkit-transition-delay: 0.2s;
                                                                  transition-delay: 0.2s;
                                                                }
                                                                figure.snip1321:hover:after,
                                                                figure.snip1321.hover:after {
                                                                  -webkit-transform: rotateX(0);
                                                                  transform: rotateX(0);
                                                                  opacity: 0.9;
                                                                }

EFFET SURVOL 04 "news"

News

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

Codes à Copier/Coller :

CODE HTML

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

<div class="container">
                                                                 <div class="card">
                                                                
                                                                      <div class="face face1">
                                                                         <div class="content">
                                                                            <img src="wa_res/icons/newspaper.png?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0">
                                                                            <h3>News</h3>
                                                                         </div>
                                                                      </div>
                                                                      <div class="face face2">
                                                                         <div class="content">
                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                                                                            <a href="#">Read More</a>
                                                                         </div>
                                                                      </div>
                                                                   </div>
                                                                </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .container .card{border: none!important;}
                                                                
                                                                .container .card .face{
                                                                    height: 200px;
                                                                    transition: 0.5s;
                                                                }
                                                                
                                                                .container .card .face.face1{
                                                                    position: relative;
                                                                    background: #ac38e2;
                                                                    display: flex;
                                                                    justify-content: center;
                                                                    align-items: center;
                                                                    z-index: 1;
                                                                    transform: translateY(100px);
                                                                }
                                                                
                                                                .container .card:hover .face.face1{
                                                                    background: #6102a1;
                                                                    transform: translateY(0);
                                                                }
                                                                
                                                                .container .card .face.face1 .content{
                                                                    opacity: 0.2;
                                                                    transition: 0.5s;
                                                                }
                                                                
                                                                .container .card:hover .face.face1 .content{
                                                                    opacity: 1;
                                                                }
                                                                
                                                                .container .card .face.face1 .content img{
                                                                    max-width: 100px;
                                                                }
                                                                
                                                                .container .card .face.face1 .content h3{
                                                                    margin: 10px 0 0;
                                                                    padding: 0;
                                                                    color: #fff;
                                                                    text-align: center;
                                                                    font-size: 1.5em;
                                                                }
                                                                
                                                                .container .card .face.face2{
                                                                    position: relative;
                                                                    background: #fff;
                                                                    display: flex;
                                                                    justify-content: center;
                                                                    align-items: center;
                                                                    padding: 20px;
                                                                    box-sizing: border-box;
                                                                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
                                                                    transform: translateY(-100px);
                                                                }
                                                                
                                                                .container .card:hover .face.face2{
                                                                    transform: translateY(0);
                                                                }
                                                                
                                                                .container .card .face.face2 .content p{
                                                                    margin: 0;
                                                                    padding: 0;
                                                                }
                                                                
                                                                .container .card .face.face2 .content a{
                                                                    margin: 15px 0 0;
                                                                    display:  inline-block;
                                                                    text-decoration: none;
                                                                    font-weight: 900;
                                                                    color: #333;
                                                                    padding: 5px;
                                                                    border: 1px solid #333;
                                                                }
                                                                
                                                                .container .card .face.face2 .content a:hover{
                                                                    background: #6102a1;
                                                                    color: #fff;
                                                                }

EFFET SURVOL 05 "effet arrondi"

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<img src="wa_res/icons/AA_SLIDE03.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" >
                        <img src="wa_res/icons/AA_SLIDE04.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" style="--color:#0B486B">
                        <img src="wa_res/icons/AA_SLIDE02.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0" style="--color:#BD1550">

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

                        .$ img {
                          --border: 15px;
                          --gap: 12px;
                          --color: #FA6900;
                          
                          width: 200px;
                          aspect-ratio: 1;
                          box-sizing: border-box;
                          border-radius: 50%;
                          margin: 10px;
                          cursor: pointer;
                          padding: calc(var(--border) + var(--gap));
                          
                          --angle: 90deg;
                          background:
                            radial-gradient(farthest-side,var(--color) 97%,#0000 101%) 85.35% 85.35%,
                            conic-gradient(from calc(180deg - var(--angle)/2),#0000 var(--angle),var(--color) 0),
                            radial-gradient(farthest-side,var(--color) 97%,#0000 101%) 14.65% 85.35%;
                          background-size: var(--border) var(--border),auto;
                          background-repeat: no-repeat;
                          
                          -webkit-mask:
                            radial-gradient(farthest-side, 
                             #000  calc(99%  - calc(var(--border) + var(--gap))),
                             #0000 calc(100% - calc(var(--border) + var(--gap))) 
                                   calc(99%  - var(--border)), 
                             #000  calc(100% - var(--border)));
                                  mask:
                            radial-gradient(farthest-side, 
                             #000  calc(99%  - calc(var(--border) + var(--gap))),
                             #0000 calc(100% - calc(var(--border) + var(--gap))) 
                                   calc(99%  - var(--border)), 
                             #000  calc(100% - var(--border)));
                          transition: --angle .4s,--gap .4s;
                        }
                        img:hover {
                          --angle: 0deg;
                          --gap: 5px;
                        }

EFFET SURVOL 06 "halo diagonale"

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<figure class="snip1206"> <img src="wa_res/icons/bridge-g3cea8f3d9_640.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0"/> <figcaption> <h2>WA FUSION</h2> <p>Avoir un Design efficace pour votre site web !</p> </figcaption> <a href="#"></a> </figure>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

figure.snip1206 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 1200px; max-height: 350px; width: 100%; color: #000000; text-align: center; } figure.snip1206 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1206 img { opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.snip1206:after { background: #ffffff; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; content: ''; opacity: 0.75; -webkit-transform: skew(-45deg) scaleX(0); transform: skew(-45deg) scaleX(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } figure.snip1206 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } figure.snip1206 h2, figure.snip1206 p { margin: 0; width: 100%; opacity: 0; } figure.snip1206 h2 { padding: 0 30px; display: inline-block; font-weight: 400; text-transform: uppercase; } figure.snip1206 p { padding: 0 50px; font-size: 0.8em; font-weight: 500; } figure.snip1206 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1206:hover:after, figure.snip1206.hover:after { -webkit-transform: skew(-45deg) scaleX(1); transform: skew(-45deg) scaleX(1); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } figure.snip1206:hover figcaption h2, figure.snip1206.hover figcaption h2, figure.snip1206:hover figcaption p, figure.snip1206.hover figcaption p { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip1206:hover figcaption h2, figure.snip1206.hover figcaption h2 { opacity: 1; } figure.snip1206:hover figcaption p, figure.snip1206.hover figcaption p { opacity: 0.7; }

EFFET SURVOL 07 "double info"

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<figure class="snip0019"> <img src="wa_res/icons/hong-kong-gc27ca2ed7_640.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0"/> <figcaption> <div><h2>Lorem <span>IPSUM</span></h2></div> <div><p>En imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page,Généralement, on utilise un texte en faux latin, le Lorem ipsum ou Lipsum.</p></div> <a href="#"></a> </figcaption> </figure>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

figure.snip0019 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 999px; max-height: 280px; width: 100%; background: #000000; text-align: center; } figure.snip0019 * { -webkit-box-sizing: border-box; box-sizing: border-box; } figure.snip0019 img { opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.snip0019 figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left; } figure.snip0019 figcaption > div { float: left; height: 100%; overflow: hidden; width: 50%; position: relative; } figure.snip0019 figcaption::before { position: absolute; top: 50%; bottom: 50%; left: 50%; width: 2px; content: ''; opacity: 0; background-color: rgba(255, 255, 255, 0); -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } figure.snip0019 h2, figure.snip0019 p { margin: 0; padding: 20px; opacity: 0; position: absolute; top: 0; width: 100%; left: 0; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s; } figure.snip0019 h2 { text-align: right; display: inline-block; word-spacing: -0.1em; font-weight: 300; text-transform: uppercase; bottom: 0; background: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(50%, 0%, 0); transform: translate3d(50%, 0%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip0019 h2 span { font-weight: 800; } figure.snip0019 p { display: block; bottom: 0; text-align: left; font-weight: 300; top: 0%; color: #000; background: #ffffff; -webkit-transform: translate3d(-50%, 0%, 0); transform: translate3d(-50%, 0%, 0); -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip0019 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; color: #ffffff; } figure.snip0019:hover img { opacity: 0.7; } figure.snip0019:hover figcaption h2, figure.snip0019:hover figcaption p { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } figure.snip0019:hover figcaption h2 { opacity: 1; } figure.snip0019:hover figcaption p { opacity: 1; } figure.snip0019:hover figcaption::before { background: #ffffff; top: 0px; bottom: 0px; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; }

EFFET SURVOL 08

Joana Rio

Web designer

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

  <div class="box">
                                                                                <img src="wa_res/icons/WomanPC.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0">
                                                                                <div class="box-content">
                                                                                    <h3 class="title">Joana Rio</h3>
                                                                                    <span class="post">Web designer</span>
                                                                                    <ul class="icon">
                                                                                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                                                                                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.box{
                                                                    color: #fff;
                                                                    font-family: 'Space Grotesk', sans-serif;
                                                                    text-align: center;
                                                                    position: relative;
                                                                }
                                                                .box:before{
                                                                    content: "";
                                                                    background: linear-gradient(#FF512F,#F09819);
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    opacity: 0;
                                                                    position: absolute;
                                                                    top: 0;
                                                                    left: 0;
                                                                    transition: all 0.5s;
                                                                }
                                                                .box:hover:before{ 
                                                                    opacity: 0.7;
                                                                    top: 10px;
                                                                    left: 10px;
                                                                }
                                                                .box img{
                                                                    width: 100%;
                                                                    height: auto;
                                                                }
                                                                .box-content{
                                                                    padding: 0;
                                                                    text-align: left;
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    opacity: 0;
                                                                    position: absolute;
                                                                    top: 0;
                                                                    left: 0;
                                                                    z-index: 1;
                                                                    transition: all 0.5s ease 0s;
                                                                }
                                                                .box:hover .box-content{
                                                                    padding: 20px;
                                                                    opacity: 1;
                                                                }
                                                                .box .title{
                                                                    font-size: 24px;
                                                                    font-weight: 700;
                                                                    text-transform: capitalize;
                                                                    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
                                                                    margin: 0 0 1px;
                                                                }
                                                                .box .post{
                                                                    font-size: 16px;
                                                                    font-weight: 400;
                                                                    letter-spacing: 1px;
                                                                    text-transform: capitalize;
                                                                    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
                                                                    display: block;
                                                                }
                                                                .box .icon{
                                                                    padding: 0;
                                                                    margin: 0;
                                                                    list-style: none;
                                                                    position: absolute;
                                                                    right: 0;
                                                                    bottom: 0;
                                                                    z-index: 1;
                                                                    transition: all 0.7s ease 0s;
                                                                }
                                                                .box:hover .icon{
                                                                    right: 10px;
                                                                    bottom: 10px;
                                                                }
                                                                .box .icon li{
                                                                    margin: 0 4px;
                                                                    display: inline-block;
                                                                }
                                                                .box .icon li a{
                                                                    color: #fff;
                                                                    font-size: 13px;
                                                                    text-align: center;
                                                                    line-height: 28px;
                                                                    width: 30px;
                                                                    height: 30px;
                                                                    border: 2px solid #fff;
                                                                    display: block;
                                                                    transition: all 0.35s ease 0s;
                                                                }
                                                                .box .icon li a:hover{
                                                                    color: #fff;
                                                                    border-radius: 50%;
                                                                }

EFFET SURVOL 09

Julie Dupont

Web designer

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<div class="box2">
                                                                                <img src="wa_res/icons/business.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0">
                                                                                <div class="box-content2">
                                                                                    <h3 class="title">Julie Dupont</h3>
                                                                                    <span class="post">Web designer</span>
                                                                                    <ul class="icon">
                                                                                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                                                                                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                                                                                    </ul>
                                                                                </div> </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.$ {
                                                                  margin: 0;
                                                                  font-family: Raleway;
                                                                }
                                                                
                                                                
                                                                .accordion-wrapper {
                                                                  display: block;
                                                                  max-width: 500px;
                                                                  margin: 0 auto;
                                                                  margin-top: 0px;
                                                                  margin-bottom: 0px;
                                                                }
                                                                
                                                                .accordion + .title {
                                                                  user-select: none;
                                                                  cursor: pointer;
                                                                  display: flex;
                                                                  align-items: center;
                                                                  justify-content: space-between;
                                                                  padding: 8px;
                                                                  background-image: linear-gradient(to right, #000000, #ac38e2);
                                                                }
                                                                
                                                                .accordion ~ .title strong {
                                                                  line-height: 24px;
                                                                  color: white;
                                                                }
                                                                
                                                                .accordion ~ .title .side-icon {
                                                                  display: block;
                                                                }
                                                                
                                                                .accordion:checked ~ .title .side-icon {
                                                                  display: none;
                                                                }
                                                                
                                                                .accordion ~ .title .down-icon {
                                                                  display: none;
                                                                }
                                                                
                                                                .accordion:checked ~ .title .down-icon {
                                                                  display: block;
                                                                }
                                                                
                                                                .accordion ~ .content {
                                                                  display: none;
                                                                  padding: 8px;
                                                                  cursor: pointer;
                                                                }
                                                                
                                                                .accordion:checked ~ .content {
                                                                  display: block;
                                                                }

EFFET SURVOL 10

Jeane Mortier

Web designer

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

.<div class="box3">
                                                                 <img src="wa_res/icons/business.jpg?t=86fbec05_1e41_4193_ba99_d2b57ad98cb0">
                                                                                <div class="box-content3">
                                                                                    <h3 class="title">Miranda Roy</h3>
                                                                                    <span class="post">Web designer</span>
                                                                                    <ul class="icon">
                                                                                        <li><a href="#"><i class="fa fa-search"></i></a></li>
                                                                                        <li><a href="#"><i class="fa fa-link"></i></a></li>
                                                                                    </ul>
                                                                                </div> </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

.box3{
                                                                    font-family: 'Signika', sans-serif;
                                                                    text-align: center;
                                                                    border-radius: 15px;
                                                                    overflow: hidden;
                                                                    position: relative;
                                                                }
                                                                .box3:before{
                                                                    content:"";
                                                                    background: linear-gradient(to right,#30E8BF,#FF8235);
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    border-radius: 15px;
                                                                    transform-origin: 100% 0;
                                                                    transform: rotate(-90deg);
                                                                    position: absolute;
                                                                    top: 0;
                                                                    left: 0;
                                                                    transition: all 0.35s ease-in-out;
                                                                }
                                                                .box3:hover:before{
                                                                    opacity: 0.7;
                                                                    transform: rotate(0deg);
                                                                }
                                                                .box3 img{
                                                                    width: 100%;
                                                                    height: auto;
                                                                }
                                                                .box3 .box-content3{
                                                                    color:#fff;
                                                                    width: 100%;
                                                                    padding: 15px 5px;
                                                                    transform-origin: 100% 0;
                                                                    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
                                                                    position: absolute;
                                                                    top: 50%;
                                                                    left: 50%;
                                                                    transition: all 0.35s ease-in-out;
                                                                }
                                                                .box3:hover .box-content3{
                                                                    transform: translateX(-50%) translateY(-50%) rotate(0deg);
                                                                }
                                                                .box3 .title{
                                                                    font-size: 22px;
                                                                    font-weight: 600;
                                                                    text-transform: uppercase;
                                                                    letter-spacing: 1px;
                                                                    text-shadow: 0 0 10px rgba(0,0,0,0.2);
                                                                    margin: 0 0 3px;
                                                                }
                                                                .box3 .post{
                                                                    font-size: 14px;
                                                                    font-weight: 200;
                                                                    letter-spacing: 1px;
                                                                    text-transform: capitalize;
                                                                    display: block;
                                                                    margin: 0 0 10px;
                                                                    text-shadow: 0 0 10px rgba(0,0,0,0.2);
                                                                }
                                                                .box3 .icon{
                                                                    padding: 0;
                                                                    margin: 0;
                                                                    list-style: none;
                                                                }
                                                                .box3 .icon li{
                                                                    margin: 0 3px;
                                                                    display: inline-block;
                                                                }
                                                                .box .icon li a{
                                                                    color: #fff;
                                                                    font-size: 15px;
                                                                    line-height: 34px;
                                                                    width: 34px;
                                                                    height: 34px;
                                                                    border: 1px solid #fff;
                                                                    display: block;
                                                                    position: relative;
                                                                    transition: all 0.35s;
                                                                }
                                                                .box3 .icon li a:hover{
                                                                    color: #fff;
                                                                    background: rgba(144,109,50,1);
                                                                    border-radius: 10px;
                                                                    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
                                                                }

Soutenez mon travail.

Si vous appréciez mon travail, que vous voulez l'encourager, vous pouvez faire un don ici.
Tout don, aussi petit soit-il, peut faire la différence !

Merci pour votre soutien !

FAIRE UN DON

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr

EFFETS DE SURVOL

Tutoriels vidéo

EFFET SURVOL 01 "snip "

MACAO VOTRE TITRE

EFFET SURVOL 02 "move down"

Norman Gordon

EFFET SURVOL 03 "case blanche"

WA-FUSION.fr

Luis Santos

EFFET SURVOL 04 "news"

News

EFFET SURVOL 05 "effet arrondi"

EFFET SURVOL 06 "halo diagonale"

WA FUSION

EFFET SURVOL 07 "double info"

Lorem IPSUM

EFFET SURVOL 08

Joana Rio

EFFET SURVOL 09

Julie Dupont

EFFET SURVOL 10

Jeane Mortier

Soutenez mon travail.