Dev Faq
1
votes

CSS Img redimensionner le temps de transition uniquement en survol

J'ai un problème avec une animation sur l'une de mes images. Je veux que l'image soit redimensionnée en survol avec un temps de transition (puis avoir un temps de transition pour revenir à la taille d'origine lorsque la souris se déplace hors de l'image), mais lorsque je redimensionne la fenêtre et l'image se redimensionne en conséquence, elle se redimensionne avec la transition temps . Quelqu'un connaît-il un moyen de contourner ce problème? 

<body>
  <header>
    <img src="https://picsum.photos/400/100/?random">
  </header>

  <div class="row">
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random">
        <div class="centered">1</div>
      </a>
    </div>
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random" />
        <div class="centered">2</div>
      </a>
    </div>
  </div>

  <footer>
    <p>This is where I would put some filler text, if I had any</p>
  </footer>
</body>

Je peux voir pourquoi la transition s'applique à l'image lorsque la fenêtre est redimensionnée, mais je ne sais pas comment appliquer la transition lorsque la souris s'éloigne. Quelqu'un peut-il suggérer un moyen de contourner ce problème?

Gif du problème de redimensionnement

edit: code complet posté ci-dessous 

html {
  height: 100%;
}

body {
  min-width: 600px;
  min-height: 100%;
  position: relative;
  font-family: Helvetica;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  overflow-y: hidden;
}


/*Header*/

header {
  background: #FFFFFF;
  color: #F89828;
  height: 159px;
}

header img {
  margin-left: calc(50% - 122px);
  margin-top: 60px;
  margin-bottom: 60px;
  height: 39px;
  width: 244px;
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(100vh - 239px);
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(100vh - 239px);
  transition: 0.6s ease;
}

.row .column:hover img {
  transition: 0.6s ease;
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(110vh - 239px);
}

.centered {
  color: #FFFFFF;
  position: absolute;
  font-size: 4em;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
}


/*footer*/

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  color: #FFFFFF;
  background-color: #808080;
  font-weight: bold;
}
<div class="column">
    <a href="-----.html">
        <img src="-----.jpg">
    </a>
</div>

.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
    width:100%;
    height: calc(100vh - 300px);
}

.column:hover img{
    filter: brightness(0.5);
    width:110%;
    transform: translate(-5%,-5%);
    transition: 0.6s ease;
    height: calc(110vh - 300px);
}

2 commentaires

Voulez-vous dire que la largeur de l'image correspond à 100% de la fenêtre (ou de la colonne) lorsqu'elle ne survole pas? Cette partie ne ressort pas clairement de la question.

oui lorsque vous ne survolez pas l'image doit représenter 100% de la colonne. J'ai essayé une autre réponse des utilisateurs de définir la largeur sans survoler et cela a aidé, mais maintenant l'image passe par la transition pour la hauteur. J'ai depuis ajouté un pied de page de hauteur fixe à la page, donc j'utilise maintenant height: calc (100vh - 300px); pour définir la hauteur. cela pourrait-il être à l'origine du problème?

4 Réponses :

1
votes

Vous devez attribuer width sans hover pour l'animation à la souris, vérifiez-la 

<div class="column">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>
</div>
.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
    width:35%;
}

.column:hover img{
    filter: brightness(0.5);
    width:110%;
    transform: translate(-5%,-5%);
    transition: 0.6s ease;
}

3 commentaires

La transition sur: hover est redondante dans cet exemple.

Je viens d'essayer avec une largeur de 100% mais cela pose toujours le même problème. J'ai depuis ajouté une contrainte de hauteur mais cela n'aide pas non plus. Je sais que cela changera le rapport hauteur / largeur mais pour le moment je suis plus préoccupé par la transition.

En raison de la traduction et de la largeur s'appliquant tous les deux au survol, supprimer la traduction et vérifier

0
votes

Essayez d'utiliser scale (2) cela fonctionne bien pour moi.

Mais vous devez changer la translate () valeur selon la scale () valeur selon votre exigence. 

<body>
  <header>
    <img src="https://picsum.photos/400/100/?random">
  </header>

  <div class="row">
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random">
        <div class="centered">1</div>
      </a>
    </div>
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random" />
        <div class="centered">2</div>
      </a>
    </div>
  </div>

  <footer>
    <p>This is where I would put some filler text, if I had any</p>
  </footer>
</body>
html {
  height: 100%;
}

body {
  min-width: 600px;
  min-height: 100%;
  position: relative;
  font-family: Helvetica;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  overflow-y: hidden;
}


/*Header*/

header {
  background: #FFFFFF;
  color: #F89828;
  height: 159px;
}

header img {
  margin-left: calc(50% - 122px);
  margin-top: 60px;
  margin-bottom: 60px;
  height: 39px;
  width: 244px;
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(100vh - 239px);
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(100vh - 239px);
  transition: 0.6s ease;
}

.row .column:hover img {
  transition: 0.6s ease;
  width: 110%;
  cursor: pointer;
  transform: translate(-10%,-10%) scale(1.3);
  filter: brightness(0.5);
  height: calc(110vh - 239px);
}


.centered {
  color: #FFFFFF;
  position: absolute;
  font-size: 4em;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
}


/*footer*/

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  color: #FFFFFF;
  background-color: #808080;
  font-weight: bold;
}

Mis à jour avec votre code. 

<div class="column">
    <a href="-----.html">
        <img src="https://picsum.photos/300/100/?random">
    </a>
</div>
.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
}

.column:hover img{
    filter: brightness(0.5);
    transform: translate(50%,50%) scale(2);
    transition: 0.6s ease;
}

J'espère que cela vous a été utile.

3 commentaires

Cela a très bien fonctionné pour arrêter la transition de redimensionnement! le seul problème maintenant est que lorsque la fenêtre est suffisamment étroite, les images n'atteignent pas le haut du pied de page. Je pense que cela pourrait être un problème avec moi en utilisant height: calc (100vh - 300px);

Cela peut être, veuillez également modifier le translate () selon vos besoins.

Juste mis à jour avec le code complet, merci pour votre aide!

0
votes

Essayez ceci: 

<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>
.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(40%,40%)scale(2);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



 
  

<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>
.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(0%,0%);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(0%,0%); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



@keyframes icon-wrap {
  0% { transform:translate(0%,0%); }
  100% { transform: translate(40%,40%)scale(2);
   width:150px;
      height:150px;
  }
}
@-webkit-keyframes icon-wrap {
  0% { transform: translate(0%,0%); }
  100% { transform: translate(40%,40%) scale(2); 
   width:150px;
      height:150px;  }
}

2 commentaires

Pour autant que je puisse voir, cet extrait de code ne fait que passer entre les états les plus grands et les plus petits, peu importe où ma souris est positionnée.

Cela dépend de la minuterie. Si vous avez besoin lorsque vous déplacez la souris, je vais le changer.

1
votes

Vous ne pouvez définir la transition sur votre image que lorsque la fenêtre est survolée. De cette façon, lors du redimensionnement, cela n'affectera plus votre élément, mais lors du survol et de la souris de votre élément, il sera toujours actif. 

<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>
:root.resizing .row .column img {
  transition: none;
}
.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  transition: 0.6s ease;
}

.row .column:hover img {
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}

Mais en utilisant cette solution, si souris du document lui-même, alors la transition sera également désactivée ...

Malheureusement, je ne le fais pas. Je ne vois aucune autre solution que celle-là, sauf en utilisant js bien sûr. 

(function(){
  let timer;
  const docEl = document.documentElement;
  addEventListener('resize', e => {
    clearTimeout(timer);
    docEl.classList.add('resizing');
    timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
  });
})();
<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>
/* when hovering the page */
:hover .row .column img {
  transition: 0.6s ease;
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  /*  transition: 0.6s ease; [removed]*/
}

.row .column:hover img {
  /*  transition: 0.6s ease; [useless]*/
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor