Есть div
, в нем прописан background-image
. Как используя :hover
сделать изображение полупрозрачным под текстом и вывести текст который до наведения не видим (с текстом сделал так color: transparent -> color: black
).
-
Код в студию....– Urmuz TagizadeCommented 18 апр. 2016 в 11:48
-
попробуйте использовать псевдо элемент css-tricks.com/snippets/css/transparent-background-images– m0sk1tCommented 18 апр. 2016 в 11:57
-
Спасибо за советы, получилось так-же вставкой еще одного div внутрь с уже нужными параметрами и opacity.– Андрiй БабарицькийCommented 18 апр. 2016 в 12:22
-
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).– Nicolas ChabanovskyCommented 19 апр. 2016 в 8:14
Добавить комментарий
|
2 ответа
.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>
Если я тебя правильно понял, то самый простой способ такой:
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;
}
А так скидывай код, если хочешь получить прямой ответ.