28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

J'ai créé une bannière en haut de mon site avec quelques animations en CSS en récupérant un bout de code mais j'ai un soucis avec le browser safari, un contour blanc bizarre apparait au survol lors de l'animation. Des fois le contour n'apparait que sur la case survolée et des fois sur toutes les cases...

J'ai mis des border : none un peu partout mais rien y fait.

Voici une petite vidéo du phénomène paranormal lol : https://youtu.be/MI5NiPVFuqA

Avez-vous une idée de ce qui cloche ?

<div class="seance_container">        
	
            <div class="hoverEffectR"><!--
              
              --><div class="uxhoverR hoverEffect-second">
                    <img class="imgR" src="../images/choix/slide1R.jpg" />
                        <div class="maskR">
                          <a href="../pages/seance1.html" class="infoR"><img src="../images/choix/seance1R.png" width:"135px" height:"100px" BORDER="0"></a>
                        </div>
                       <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_00.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
            
         --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide2R.jpg" />
                <div class="maskR">
                    <a href="../pages/seance2.html" class="infoR"><img src="../images/choix/seance2R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
            <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_01.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                    --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide3R.jpg" />
                <div class="maskR">
                       <a href="../pages/seance3.html" class="infoR"><img src="../images/choix/seance3R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                   <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_02.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                    --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide4R.jpg" />
                <div class="maskR">
                      <a href="../pages/seance4.html" class="infoR"><img src="../images/choix/seance4R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                        <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_03.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                      --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide5R.jpg" />
                <div class="maskR">
             <a href="../pages/seance5.html" class="infoR"><img src="../images/choix/seance5R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                 <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_04.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                      --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide6R.jpg" />
                <div class="maskR">
                  <a href="../pages/seance6.html" class="infoR"><img src="../images/choix/seance6R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_05.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                      --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide7R.jpg" />
                <div class="maskR">
                <a href="../pages/seance7.html" class="infoR"><img src="../images/choix/seance7R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_06.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
                
                      --><div class="uxhoverR hoverEffect-second">
                <img class="imgR" src="../images/choix/slide8R.jpg" />
                <div class="maskR">
                  <a href="../pages/seance8.html" class="infoR"><img src="../images/choix/seance8R.png" width:"135px" height:"100px" BORDER="0"></a>
                </div>
                <img class="horlogeR" src="../images/pictos/horloges/horlogeSD_07.png" style="width:75px;height:75px;left:30px;top:-90px";>
              </div><!--
     
                  --></div>
       
        </div>    


/* General style SEANCE*/

.seance_container{
    position:relative;
    display:block;
    margin:0 auto;
    top:0px;
    border: 0 none;
    text-decoration: none;
}

.hoverEffectR{
    margin:0;
    border: 0 none;
    text-decoration: none;
}
.uxhoverR {
  display:inline-block;
  margin:0;
  border: 0 none;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.uxhoverR .maskR,
.uxhoverR .contentR {
  width: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
    border: 0 none;
    text-decoration: none;
}

.uxhoverR img {
  display: block;
  position: relative;
  border: 0 none;
  text-decoration: none;
}

.uxhoverR a.infoR {
  display: inline-block;
  text-decoration: none;
  top:-100px;
  text-transform: uppercase;
  margin:0;
  border: 0 none;
}

.horlogeR{
    position:absolute;
    margin:0;
    top:-100px;
    border: 0 none;
    text-decoration: none;
}


/* Effect SEANCE*/

.hoverEffect-second img {
  transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
  width:100%;
  height:auto;
  opacity:0.8;
    -webkit-opacity:0.8;
    -moz-opacity:0.8;
    -o-opacity:0.8;
  border: 0 none;
  text-decoration: none;
}

.hoverEffect-second .maskR {
  opacity: 0;
      -webkit-opacity: 0;
      -moz-opacity: 0;
      -o-opacity: 0;
  transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
      -moz-transition: all 0.8s ease-in-out;
      -o-transition: all 0.8s ease-in-out;
  width: 100%;
  height: 100%;
          border: 0 none;
  text-decoration: none;
    
}

.hoverEffect-second a.infoR {
  opacity: 0;
      -webkit-opacity: 0;
      -moz-opacity: 0;
      -o-opacity: 0;
  transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;
  border: 0 none;
  text-decoration: none;
}

.hoverEffect-second .horlogeR {
  transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
  transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  border: 0 none;
  text-decoration: none;
}

/* Effect SEANCE:hover*/

.hoverEffect-secondt:hover img {
  transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
  opacity:1;
    -webkit-opacity:1;
    -moz-opacity:1;
    -o-opacity:1;
  border: 0 none;
  text-decoration: none;
}

.hoverEffect-second:hover .imgR{
filter:brightness(0.2);
    -webkit-filter:brightness(0.2);
    -moz-filter:brightness(0.2);
    -o-filter:brightness(0.2);
  border: 0 none;
  text-decoration: none;
}

.hoverEffect-second:hover .maskR {
  opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    border: 0 none;
    text-decoration: none;
}

.hoverEffect-second:hover a.infoR {
  transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
  opacity:1;
    -webkit-opacity:1;
    -moz-opacity:1;
    -o-opacity:1;
    border: 0 none;
  text-decoration: none;
}

.hoverEffect-second:hover a.infoR {
  transition-delay: 0.0s;
    -webkit-transition-delay: 0.0s;
    -moz-transition-delay: 0.0s;
    -o-transition-delay: 0.0s;
   border: 0 none;
   text-decoration: none;
}

.hoverEffect-second:hover .horlogeR {
  transform: scale(0.6) translateY(-30px);
    -webkit-transform: scale(0.6) translateY(-30px);
    -moz-transform: scale(0.6) translateY(-30px);
    -o-transform: scale(0.6) translateY(-30px);
  border: 0 none;
  text-decoration: none;
}


Merci d'avance ! Smiley biggrin