Простой переход CSS - ничего не работает - PullRequest
Новая
       21

Простой переход CSS - ничего не работает

0 голосов
/ 08 мая 2018

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

Вот HTML: 

<a href="http://calvarygigharbor.com/heavenly-hitters/">
<div class="tinted-image"> </div></a>

С этим CSS: 

.tinted-image {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;

background:  
linear-gradient(
  rgba(255, 0, 0, 0.6), 
  rgba(237,240,0,0.6)
),
/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

.tinted-image:hover {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;
background: 

/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

Картинка и парение прекрасно работают без перехода. Как бы вы получили переход для работы с этим?

URL: http://calvarygigharbor.com/css-testing/

1 Ответ

0 голосов
/ 08 мая 2018

Вы не можете применить переход к градиенту, вы можете попробовать добавить переход к background-size. Используйте другое значение background-size, чтобы настроить способ работы перехода, и вы также можете изменить background-position: 

.tinted-image {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background: linear-gradient( rgba(255, 0, 0, 0.6), rgba(237, 240, 0, 0.6)),
  /* image */
  url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
  background-size:100% 100%, contain;
  background-position:center,center; /*OR [left,center] OR [top,center] ...*/ 
  background-repeat:no-repeat;
}

.tinted-image:hover {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background-size:0 0,contain; /* OR [100% 0,contain] OR [0 100%,contain] */
}
<a href="http://calvarygigharbor.com/heavenly-hitters/">
  <div class="tinted-image"> </div>
</a>
...