Trying to use sass to position a sprite: CodePen Link. I want to have each card show, but I can only get the visa one to show using the &:before method. Can I not nest .visa/.mastercard/.amex in &:before?
<div class="saved_cc_block">
<div class="saved_cc">
<a class="cc_img visa"></a>
</div>
<div class="saved_cc">
<a class="cc_img mastercard"></a>
</div>
</div>
.cc_img {
position: relative;
height: 26px;
left: 9px;
padding-left: 50px;
&:before {
content: "";
position: absolute;
width: 41px;
height: 26px;
top: 50%;
left: 0;
background: url('http://i.imgur.com/3zRD5fn.png') no-repeat;
.visa {
background-position: 0;
}
.mastercard {
background-position: -51px 0;
}
.amex {
background-position: -102px 0;
}
}
}
:before is a pseudo element, you can't nest other elements within it. I think you probably want to structure your css like this:
.cc_img {
position: relative;
height: 26px;
left: 9px;
padding-left: 50px;
&:before {
content: "";
position: absolute;
width: 41px;
height: 26px;
top: 50%;
left: 0;
background: url('http://i.imgur.com/3zRD5fn.png') no-repeat;
}
}
.visa:before {
background-position: 0;
}
.mastercard:before {
background-position: -51px 0;
}
.amex:before {
background-position: -102px 0;
}
No, you can't.
The elements with those class names are children of the cc_img div, not of the generated pseudo-element that appears before it. Psuedo-elements can't have child nodes.
Look at generating the psuedo-element before the link instead of before the div.
Related
I'm trying to create the following functionality:
Have two transparent images layered on top of each other inside of a <div>; one is an object and the other image represents the 'glow' around the object.
On hover, I want the glow to change colors, but I do not want the original object to change colors.
Here's my existing setup:
HTML:
<div id="container">
<div id="constellation">
</div>
<img src="https://storage.googleapis.com/astrology-images/constellations/aquarius-white.png"/>
</div>
CSS:
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background-image: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #4E6F2E;
mix-blend-mode: multiply;
opacity: 0;
}
#constellation:hover:after {
opacity: 1;
}
I've created an image of a constellation that lives in the <img>; this should always stay white.
In a separate <div> I have an image for the "halo"; this image uses the mix-blend-mode to multiply the image with a color on hover.
Unfortunately, the way I have it now has both images multiplied by the same color, even though they are in different elements! I have a live example here: I have an example here: https://jsfiddle.net/wcL2exa4/105/
How can I get my desired behavior?
The problem is that #constellation:after is positioned above your image. Set a higher z-index for your image and hover trigger on the parent.
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
img {
position: relative;
z-index: 2;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red;
mix-blend-mode: multiply;
opacity: 0;
}
#container:hover #constellation:after {
opacity: 1;
}
See example here: https://jsfiddle.net/pcaoyb7s/
I want to add a transparent black overlay over an img tag with some text in it, like in the example screenshot below. Ideally only with HTML and CSS.
I have been searching for hours and can't find anything.
I know this could be easily done if the image is used as a background, but this isn't an option for us (SEO reasons).
That shouldn't be so bad. Would something like this work? First some HTML:
#container {
position: relative;
width: 600px;
height: 400px;
}
#someimg {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0;
left: 0;
clear: float;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
<html>
<body>
<div id="container">
<img id="someimg" src="https://www.w3schools.com/w3images/fjords.jpg"</img>
<div id="overlay">This is some text in an overlay</div>
</div>
</body>
</html>
Mic.com used the following code:
.article-card-8col__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.9));
background: linear-gradient(to bottom,transparent,rgba(0,0,0,.9));
}
I changed it slightly. You could also use their code with on a sibling div element of the image & the parent having position: relative; or use one like mine.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:after{
content: "";
background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9));
background: linear-gradient(transparent,rgba(0,0,0,.9));
position: absolute;
display: block;
width: 100%;
top: 0;
bottom: 0;
}
<div class="wrapper">
<img src="https://thumbs.mic.com/MTAxZmJlOGIyMSMvYzNOMU1wRTJjMEdyWUZySS1UVjNnMV9LVkZRPS8xMngyNzM6NDk4MHgyODA5LzgwMHg0NTAvZmlsdGVyczpmb3JtYXQoanBlZyk6cXVhbGl0eSg4MCkvaHR0cHM6Ly9zMy5hbWF6b25hd3MuY29tL3BvbGljeW1pYy1pbWFnZXMvanQwY2dmZXZ5aW10aGhqZzBtYXc4cHZxNndrZmdwbmNqNzQzeTB4YmhybWtyOGc0YXYxcHVidWVldzU0OWIwcC5qcGc.jpg" />
</div>
I try to put a line on only one word. With changing its size and its position.
Here the result I would like to have:
I tried to use a span with background-image but no success.
https://jsfiddle.net/XZKS/193u9dam/
And other problem, background-image don't work when using local image.
My website arborescence:
_include
css
style.css
js
img
line.png
background-image: url("../img/line.png");
I hope someone could help me, thanks
Try this:
.myWordWithLine {
position: relative;
}
.myWordWithLine::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
height: 24px; // your line height
background-color: red; // your line color
}
Method #01:
You can use css linear-gradient() to draw this background:
Steps:
Create background image with linear-gradient().
Adjust its size with css background-size property.
Place it at the bottom position of the element with background-position css property.
Necessary CSS:
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
}
h3 {
font-size: 24px;
}
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
position: relative;
padding-top: 0;
padding-bottom:0;
}
<h3>MY <span class="line">BLOG</span></h3>
Method #02:
You can use ::before OR ::after pseudo element:
h3 {
font-size: 24px;
}
.line {
position: relative;
}
.line::after {
background: green;
position: absolute;
bottom: 5px;
z-index: -1;
content: '';
left: 0;
right: 0;
height: 5px;
}
<h3>MY <span class="line">BLOG</span></h3>
You can use this
http://codepen.io/B101844/pen/bgLPPb
html
<div class="main">MY
<div class="blog">
BLOG
<div class="underline"></div>
</div>
</div>
Css
.main{
font-size: 30px;
color: #1c3d93;
font-weight: 900;
}
.blog{
display: inline-block;
position: relative;
}
.underline{
position: absolute;
background-color: #91dfcf;
left: 0px;
right: 0px;
bottom: 7px;
z-index: -1;
height: 8px;
}
Is there a way using HTML to add an overlay using an image url in a specific div?
I managed to make something work using CSS :
#myDiv {
width: 100%;
height: 100%;
background: url(image.jpg) no-repeat;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
But it is a bit tricky. When I tried to do the same for other divs, it did not work. So for instance I have this CSS code for a div :
.hi-icon-wrap img
{
border-radius: 80px;
width: 153px;
height: 153px;
margin:2%;
}
and I want to add an overlay. I am using this script but with no success:
.hi-icon-wrap img:before {
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
and I also tested that :
.hi-icon-wrap img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
UPD:
HTML script:
<div class="hi-icon-wrap" class="hi-icon-wrap img" style="text-align: center">
<img src="image.png">
</div>
You should use overlay on div element and not on img
#myDiv {
position: relative;
display: inline-block;
border-radius: 80px;
overflow: hidden;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .8;
}
img {
vertical-align: top;
}
<div id="myDiv">
<img src="http://placehold.it/150x150/D6E7FF/ffffff">
</div>
Edit: You can't use :after or :before on img as you can see here Demo because image elements don't contain text or have descendants, so what you can do is wrap img in div for example and then you get this Demo
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.