0

господа. Имею следующий код:

.pre {}

.comf {
  margin-top: 40px;
}

.pre p {
  width: 301px;
  height: 226px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 18px 20px;
  position: absolute;
  top: 50.4%;
  left: 50.0%;
  transform: translate(-50%, -50%);
  transition: all .2s ease-in-out;
  opacity: 0;
  font-size: 15px;
}

.pre p:hover,
img:hover+p {
  opacity: 1;
}

.pre .col-md-4>div {
  position: relative;
}
<div class="pre">
  <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="comf">
      <img src="https://cdn.pixabay.com/photo/2014/02/05/12/23/brick-258938_640.jpg">
      <p>Парампампам.</p>
    </div>
  </div>
</div>

введите сюда описание изображенияы

То есть при наведении на картинку фон затемняется и появляется текст. Нужно сделать так, что бы в нижней части картинки уже был текст с короткой информацией, а при наведении на неё было так же, как в моем примере. Т.е. область с короткой информацией исчезает, картинка затемняется полностью и появляется текст с полной информацией.

Заранее извиняюсь, если подал текст не профессионально) Думаю суть вопроса донести смогу. Прожевал много информации, но ничего удачного не вышло к сожалению.

2 ответа 2

1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.picts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pict {
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
}

.pict img {
  display: block;
}

.pict:before,
.pict-caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .3s linear;
}

.pict:before {
  content: '';
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.pict-caption {
  padding: 10px;
  text-align: center;
  z-index: 1;
  color: #fff;
}

.pict:hover:before,
.pict:hover .pict-caption {
  opacity: 1;
}
<div class="picts">
  <div class="pict">
    <img src="http://via.placeholder.com/250x250" alt="">
    <div class="pict-caption">
      CSS - двойной Hover
    </div>
  </div>
  <div class="pict">
    <img src="http://via.placeholder.com/250x250" alt="">
    <div class="pict-caption">
      CSS - двойной Hover
    </div>
  </div>
</div>

1
  • Спасибо! Только немного по-другому хотелось бы. Нужно сделать так, что бы без наведения на картинку, снизу к примеру на 20 пикселей всегда был ховер с краткой информацией, а при наведении краткая информация исчезает и появляется полное описание услуги. 3 авг 2017 в 9:40
0

Нужно один блок скрывать сразу.

При наведении один блок скрываем, а другой отображаем.

.posle {
    display:none;
}
.wrap:hover .posle {
    display:block;
}
.wrap:hover .do {
    display:none;
}
1
  • Спасибо за помощь. Будем пытаться) 3 авг 2017 в 9:41

Ваш ответ

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

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