отрегулировать способ перехода, и вы также можете изменить
отаю над изображением с градиентом, который исчезает при наведении. Тем не менее, я не могу получить это к переходу. Я пробовал каждый переход через 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;
}
Картинка и парение работают прекрасно, без перехода. Как бы вы получили переход на работу с этим?