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

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

0 голосов
/ 16 января 2019

У меня проблема с анимацией на одном из моих изображений. Я хочу, чтобы размер изображения изменялся при наведении на него с временем перехода (и затем у меня было время перехода к исходному размеру, когда мышь перемещается из изображения), но затем, когда я изменяю размер окна и изображение соответственно изменяет размер, оно изменяет размер с переходом время Кто-нибудь знает способ обойти это? 

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

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

GIF изменения размера вопроса

изменить: полный код размещен ниже 

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;
}
<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>

Ответы [ 4 ]

0 голосов
/ 17 января 2019

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

/* 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 голосов
/ 16 января 2019

Попробуйте использовать scale(2), у меня это хорошо работает.

Но вам нужно изменить translate() значение согласно scale() значению согласно вашему требованию. 

.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;
}
<div class="column">
    <a href="-----.html">
        <img src="https://picsum.photos/300/100/?random">
    </a>
</div>

Обновлено с вашим кодом. 

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;
}
<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>

Надеюсь, это было полезно для вас.

0 голосов
/ 16 января 2019

Попробуйте это: 

.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>
0 голосов
/ 16 января 2019

Вам нужно назначить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...