So when I tried to put a white color on some text it did not change in the browser. When I user inspect on google chrome it shows that the text is "color: rgb(34, 34, 34);" When in the code I put "color:white;"
HTML:
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
CSS:
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
It could be a caching issue.
Alternatively, there might be a rule within your CSS (or another style sheet) that defines the style of the element after you change the color to white.
When you inspect it, where is the "color: rgb(34, 34, 34);" style defined from? Is it defined from the #features-text h1 that you've written, or is it being defined by another rule, elsewhere in the stylesheet (or another stylesheet?) If it's being defined elsewhere - find out where and make sure this rule isn't overwriting the style you've defined.
Or, if it's being applied by a style sheet that you can't access/edit and you need to define it in your style sheet specifically, try using:
#features-text h1 {
color: white !important;
}
Well here it works try to set it important maybe something else in your code overwrites it
body{background: gray;}
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white !important;
}
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
Something like this should do it. Obviously I changed the color to blue.
<!DOCTYPE html>
<html>
<head>
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: blue;
}</style>
</html>
Its always better to use Hex Code instead of color name. This way, you make sure every browser supports your code:
#features-text h1 {
color: #FFFFFF !important;
}
Cheers
Wrap your css code in style tags, then it'll work.
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
</style>
You can change text color by using this css code
h1{
color:#FFF;
}
try hex code and add !important:
h1{
color:#FFFFFF !important;
}
the hex code have a RGB value. it's like RR-GG-BB.
On normal number, it's count like this: 0123456789
You can count hex number like this: 0123456789ABCDEF
Related
I am currently adding an svg image to the :after element of the underline selector.
I have it working but it only looks best when the underlined text is a few words long, is there a smarter way to do this so it looks the same when one word or multiple words are underlined?
Thanks, here is the codepen of what I currently have and you can see the difference https://codepen.io/joeincite/pen/rNJOOjE
u,
span[style*="text-decoration: underline;"] {
width: fit-content;
text-decoration: none !important;
position: relative;
}
u:after,
span[style*="text-decoration: underline;"]:after {
content: "";
position: absolute;
width: 100%;
height: 2.5em;
left: 0;
width: 100%;
z-index: 10;
background-image: url('https://239547.fs1.hubspotusercontent-na1.net/hubfs/239547/Agency%20Webinar%20Web%20Best%20Practice/underline-black.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
h1 {
font-size: 45px;
}
<section>
<h1>This is a title with <u>some underlined text</u></h1>
<h2>This is some more <u>text</u></h2>
</section>
I want to change the background image of the container such that when I hover on a link in the div, the background image changes.
Reading in stackoverflow and other sources, this should work, but I have tested in both Chrome and Edge. Neither is working at the moment.
#container {
width: 50%;
height: 300px;
position: relative;
}
#text {
position: absolute;
font-size: 3em;
z-index: 5;
}
#text:hover~#background {
background-image: url("http://lorempixel.com/400/200/food/");
}
#background {
width: 100%;
background-image: url("http://lorempixel.com/400/200/animal/");
background-position: center;
background-size: cover;
height: 100%;
opacity: 0.5;
position: absolute;
}
<div id="container">
<div id="background"></div>
<div id="text">Google</div>
</div>
If you are able to change your HTML, swap the background and text elements.
Then hovering on the text element can pick up its sibling element which is the background as it comes after it in the flow:
#container {
width: 50%;
height: 300px;
position: relative;
}
#text {
position: absolute;
font-size: 3em;
z-index: 5;
}
#text:hover~#background {
background-image: url("https://picsum.photos/id/1015/300/300");
}
#background {
width: 100%;
background-image: url("https://picsum.photos/id/1016/300/300");
background-position: center;
background-size: cover;
height: 100%;
opacity: 0.5;
position: absolute;
}
<div id="container">
<div id="text">Google</div>
<div id="background"></div>
</div>
But an alternative way could be to put your background images onto a pseudo element and cut out the need for a div background which isn't really needed to be a 'proper' element as it is just decoration.
#background {
background-image: url("http://lorempixel.com/400/200/sports/");
height:200px;
}
#container:hover > div:not(:hover){
background-image: url("http://lorempixel.com/400/200/food/");
}
#text{height:0;}
<div id="container">
<div id="background">abc</div>
<div id="text">Google</div>
</div>
Thank you all.
Here is what I finally did:
#containerGen {
width: 100%;
height: 200px;
position: relative;
}
#one {
position: absolute;
z-index: 5;
}
#alive {
position: absolute;
z-index: 5;
top: 9em;
}
#alight {
position: absolute;
z-index: 5;
top: 9em;
left: 3em;
}
#and {
position: absolute;
z-index: 5;
top: 9em;
left: 6.25em;
}
#alone {
position: absolute;
z-index: 5;
top: 9em;
left: 8em;
}
#follow {
position: absolute;
z-index: 4;
top: 9em;
}
#alive:hover~#background {
background-image: url("http://lorempixel.com/400/200/food/");
}
#alight:hover~#background {
background-image: url("http://lorempixel.com/400/200/city/");
}
#alone:hover~#background {
background-image: url("http://lorempixel.com/400/200/nature/");
}
#background {
width: 100%;
background-image: url("http://lorempixel.com/400/200/sports/1/");
background-position: center;
background-size: cover;
height: 500px;
opacity: 0.5;
position: absolute;
z-index: 0;
}
<div id="containerGen">
<div id="one">
<p>
M. "Em" Savage has awoken to find herself in what can only be called a stone sarcophagus. Woken up with no memory of who she is (save for the name on her "tomb") she must free the others trapped with them, discover not only who, but where they are, and
lead their way out of whatever has them trapped in the dark.
</p>
</div>
<div id="alive"><a class="bold wavyLine" href="https://scottsigler.com/book/alive/">Alive,</a> </div>
<div id="alight"><a class="bold wavyLine" href="https://scottsigler.com/book/alight/">Alight,</a> </div>
<div id="and">and</div>
<div id="alone"><a class="bold wavyLine" href="https://scottsigler.com/book/alone/">Alone</a> </div>
<div id="follow">
<span style="margin-left:10.75em;">follow</span> the "birthday children" as they discover who they are, where they came from, and the malevolent purpose for why they are there!
<p>The author of this page makes a guest appearance as a gunner during a battle in "Alone." It is unknown at this point if I survived.</p>
</div>
<div id="background"></div>
</div>
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I have the following CSS rules applied to a DIV:
.icon {
position:relative;
display: inline-block;
width: 90px;
height: 94px;
background: url("test-icon-sprite.png") no-repeat scroll transparent;
background-position: 0 0;
overflow: hidden;
z-index: 1000;
}
.icon.plaque:after {
content: url("test-icon-plaque.png");
position:absolute;
width: 90px;
height: 94px;
z-index: 1
}
...
<div class="icon plaque"></div>
What happens is that the image in the pseudo element is positioned on top of the image in the other element. That's not what I want! Is there any way to fix this?
My goal is to create an icon with an optional backplate (plaque) using only one html element, is it doable?
Use multiple backgrounds.
.icon {
background-image: url(test-icon-sprite.png);
}
.icon.plaque {
background-image: url(test-icon-sprite.png), url(test-icon-plaque.png);
}