Des teasers plus "fun"!

Apprenez ici à rendre votre site Jimdo Creator plus "fun" en y ajoutant des blocs teasers avec des effets dynamiques. A vous de jouer!

Code à insérer dans la section "modifier le head" du menu paramètres du site :

<style type="text/css">

 

/*<![CDATA[*/

 

.jtpl-content,

.cc-m-gallery-slider ul img,

img,

.cc-imagewrapper img {border-radius:0px;}

 

.jtpl-sidebar{border-radius:0px;}

 

.jtpl-subnavigation {border-radius:0px;}

 

.jtpl-navigation__inner a:link, .jtpl-navigation__inner a:visited 

 {border-radius:4px;}

 

  div.n.clearover.j-blogarticle a.blogreadmore {margin-top:0px;}

    .sidebar-options div.n.clearover.j-blogarticle a.blogreadmore {text-align:center;}

    .sidebar-options div.n.clearover.j-blogarticle .blogreadmore {width:100%; margin-top:0px;}

    div.n.clearover.j-blogarticle {border-bottom: 1px solid #666;}

    .sidebar-options div.n.clearover.j-blogarticle {border-bottom: none;}

    

img[alt="clair"]:hover {

filter: brightness(1.5);

-webkit-filter: brightness(1.5);

-moz-filter: brightness(1.5);

-o-filter: brightness(1.5);

-ms-filter: brightness(1.5);

 

img[alt="gros"] {

transition: all .2s ease-in-out;

 -webkit-transition: all .2s ease-in-out;

 -moz-transition: all .2s ease-in-out;

 -o-transition: all .2s ease-in-out;

 -ms-transition: all .2s ease-in-out;

}

 

img[alt="gros"]:hover {

transform: scale(1.05);

 -webkit-transform: scale(1.05); 

 -moz-transform: scale(1.05);

 -o-transform: scale(1.05);       

}    

 

.cc-m-gallery-slider .bx-wrapper .bx-caption h3,

.cc-m-gallery-slider .bx-wrapper .bx-caption h2,

.cc-m-gallery-slider .bx-wrapper .bx-caption p {

 color:rgb(255, 255, 255);

 text-align:center;

}

 

.cc-m-gallery-slider .bx-wrapper .bx-caption p {

 font-size:0.7em;

 padding-top:10px;

}

 

.ccgalerie div.thumb_sq1 {

 margin: 0 8px 8px 0;

}

 

.ccgalerie div.thumb_sq1 img {

 display: block;

 border: 1px solid #ccc;

 padding: 3px;

 margin: 0px;

 background: #ffffff;

}

 

.cc-m-gallery-slider .bx-wrapper .bx-controls-auto a.bx-start, .cc-m-gallery-slider .bx-wrapper .bx-controls-auto a.bx-stop {

 display:none;

}

 

.cc-m-gallery-slider .bx-wrapper .bx-caption {

  background:rgba(0, 0, 0,.8);

  position:absolute;

  bottom:-10px;

  width:100% !important;

  margin-left:0px !important;

  height:100px;

  padding:0px;

  margin:0px;

  text-align: center;

  transition: bottom 1s, height 1s, background 1s;

  border-radius:4px;

}

 

.cc-m-gallery-slider .bx-wrapper .bx-caption:hover{

  background:rgba(0,0,0,.4);

  bottom:0px;

  height:130px;

}

 

.rssFeed,

.j-rss .j-rss-feed-title{

  text-align:center;

}

 

/*]]>*/

 

</style>