0

Здравствуйте. Есть слайдер, но никак не пойму как реализовать вот такой вот :hover на картинку: Пробовал добавлять ещё один блок делать ему opacity:0, position:absolute на всю ширину/высоту и на него вешать :hover но не работало. введите сюда описание изображения

//Тут заншоу слайды в блок и обворачиваю их item-holder
$(whichBlock).append('<div class="item-holder"><div class="slider-item backgorund-image" style="background-image:url(css/images/works/'+worksArray[i].img+'.png")></div></div>');
/*css для холдера*/
.item-holder{
    float: left;
    height: 100%;
    background-color: black;
    z-index: 20;
}
.item-holder:hover{
    background-color: rgba(26,188,156, 0.5);
}
Но при наводе ничего + его даже не видно по верх картики хотя он её обворачивает:введите сюда описание изображения

1
  • Добавьте свой код к вопросу 1 авг 2017 в 18:48

1 ответ 1

1

Вот, пара примеров анимации. Можно сделать и через ::before, но чтобы вставить иконку плюса, удобнее использовать еще один внутренний div.

.card1 {
  width: 250px;
  height: 125px;
  background-image: url(http://flrec.ifas.ufl.edu/media/flrecifasufledu/images/CarpentariaFruit-500x200.jpg);
  
  margin-bottom: 10px;
}

.card1__inner {
  content: "";
  width: 250px;
  height: 125px;  
  background-color: rgb(206, 28, 82);
  opacity: 0;
  transition: 1s;
}

.card1:hover .card1__inner {
    opacity: 0.75;
}

.card2 {
  width: 250px;
  height: 125px;
  background-image: url(http://flrec.ifas.ufl.edu/media/flrecifasufledu/images/CarpentariaFruit-500x200.jpg);
  overflow: hidden;
  position: relative;
}

.card2__inner {
  content: "";
  position: absolute;
  top: -125px;
  width: 250px;
  height: 125px;  
  background-color: rgb(206, 28, 82);
  opacity: 0;
  transition: 1s;
}

.card2:hover .card2__inner {
    opacity: 0.75;
    top: 0;
}
<div class="card1">
  <div class="card1__inner"> Я появился</div>
</div>

<div class="card2">
  <div class="card2__inner"> Я появился</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.