Применить непрозрачность для img при наведении

html css twitter-bootstrap css3

100 просмотра

1 ответ

85 Репутация автора

Я пытаюсь наложить непрозрачность на изображение, когда наведу на него курсор. Ни прозрачность, ни переход не работают, когда я применяю это к своему .imgAbout imgклассу. Не уверен, где еще я могу применить прозрачность, чтобы заставить его работать. Есть идеи, что я могу делать не так? Вот мой CSS и HTML.

HTML

<div class="row">
    <div class="col-md-4">
      <div class="imgAbout">
        <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-primary" href="bios/teamBio.html">View More</a>
        </div>
      </div>

      <h1>First Name Last Name</h1>
      <h3>Chairman &amp; CEO<br> 
      Senior Wealth Advisor</h3>
    </div> <!-- end col-md-4 -->
</div>

CSS

#about img {
  margin: 0 auto;
}

.imgAbout {
  position: relative;
}

.imgAbout img {
  display: block;
  height: auto;

  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.imgAbout img:hover {
  background: #50b948;
  opacity: 0.6;
}

.center-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center; 
}

.imgAbout .center-container .btn {
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -ms-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out,opacity 0.2s ease-in-out;
}

.imgAbout:hover .center-container .btn {
  visibility: visible;
  opacity: 1;
}
Автор: user3786102 Источник Размещён: 17.07.2016 10:21

Ответы (1)


2 плюса

5845 Репутация автора

Решение

Я сделал ручку, чтобы показать возможное решение: https://codepen.io/anon/pen/PzQPba Я надеюсь, что это то, что вы ищете, если нет, обязательно дайте мне знать.

Вы хотите , чтобы выбрать изображение , когда его родители ДИВ наведен, поэтому он должен быть: .parentDiv:hover img. Затем вы можете указать любые свойства CSS для него.

В вашем CSS-файле это будет выглядеть так:

.imgAbout:hover img {
  background: #50b948;
  opacity: 0.6;
}
Автор: Ivan Размещён: 17.07.2016 10:35
Вопросы из категории :
32x32