1

Есть div, в нем прописан background-image. Как используя :hover сделать изображение полупрозрачным под текстом и вывести текст который до наведения не видим (с текстом сделал так color: transparent -> color: black).

4
  • Код в студию.... Commented 18 апр. 2016 в 11:48
  • попробуйте использовать псевдо элемент css-tricks.com/snippets/css/transparent-background-images
    – m0sk1t
    Commented 18 апр. 2016 в 11:57
  • Спасибо за советы, получилось так-же вставкой еще одного div внутрь с уже нужными параметрами и opacity. Commented 18 апр. 2016 в 12:22
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 19 апр. 2016 в 8:14

2 ответа 2

3

.block {
  position: relative;
  width: 200px;
  height: 200px;
  background: url('http://www.nature-et-yoga.com/images/banner-accueil.jpg') no-repeat center top;
}
.block:before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.text {
  color: #fff;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.block:hover:before,
.block:hover .text {
  opacity: 1;
}
<div class="block">
  <div class="text">text</div>
</div>

2

Если я тебя правильно понял, то самый простой способ такой:

https://jsfiddle.net/pleshevskiy/wv8ehs70/

div {
  position: relative;
  width: 100px;
  height: 100px;
  color: rgba(0,0,0,.0);
  transition: all 1s ease-in-out;
}

div:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100px;
  height: 100px;
  background: #ccc url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png');
  background-size: 100%;
  opacity: 1;
  transition: all 1s ease-in-out;
}

div:hover {
   color: rgba(0,0,0,1);
}

div:hover:before {
  opacity: .5;
}

А так скидывай код, если хочешь получить прямой ответ.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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