Вопросы Теги

CSS Img изменить время перехода только при наведении

Вы можете использовать push_back (): 

newMat.push_back(Mat1);
newMat.push_back(Mat2);
1
задан weBBer 17 January 2019 в 05:21
поделиться

3 ответа

Вы можете установить переход на вашем изображении, только когда окно наведено. Таким образом, при изменении размера он больше не будет влиять на ваш элемент, но при наведении и наведении мыши на элемент он будет по-прежнему активен. 

/* 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);
}
<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>

Но, используя это решение, если вытащить из самого документа, то переход также отключится ...

К сожалению, я не вижу другого решения, кроме этого, кроме использования js, конечно. 

(function(){
  let timer;
  const docEl = document.documentElement;
  addEventListener('resize', e => {
    clearTimeout(timer);
    docEl.classList.add('resizing');
    timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
  });
})();
: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);
}
<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>

0
ответ дан Kaiido 17 January 2019 в 05:21
поделиться

Вам нужно назначить width без hover для анимации при наведении мыши, отметьте его 

.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;
}
<div class="column">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>
</div>

0
ответ дан Hiren Vaghasiya 17 January 2019 в 05:21
поделиться

Попробуйте: 

.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;  }
}
<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>
[1112 ]

0
ответ дан i_th 17 January 2019 в 05:21
поделиться
© 2017 - 2020 Вопросы и ответы по программированию