Image overlay using :after pseudo-element - html

I'm trying to overlay a transparent image over another via the after property. It's not even showing up using this method. I wanna use a base64 encoded image if at all possible. I tried with a regular non-encoded image too. No dice. Anyone have any thoughts?
My HTML:
<div class="image-container">
<img src="images/sample.jpg" alt="Sample Image" />
</div>
My CSS:
.image-container {
position: relative;
width: 183px;
height: 137px;
overflow: hidden;
}
.image-container img {
position: absolute;
}
.image-container img:after {
display: block;
position: absolute;
margin-top: -50%;
width: 183px;
height: 103px;
content: url(data:image/png;base64,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) no-repeat;
}


no-repeat is an invalid value for your content property, so it should be
.image-container img:after {
position: absolute;
margin-top: -50%;
width: 183px;
height: 103px;
content: url(#);
}
Also it won't make sense using display: block; on absolute positioned element.
Demo
Also, chrome doesn't understand img:after so better use .image-container:after
Demo 2

Related

How to make effect behind the picture?

How to make effect behind the picture? Like you can see in the picture. and of course image have to be responsive.

one line solution:
img {
padding:20px;
background:linear-gradient(transparent 40px,red 0 calc(100% - 40px),transparent 0);
}
<img src="https://picsum.photos/300/300">

Can you please check the below code? Hope it will work for you. In this code, we have given position relative to the img-block and gave background color in it's pseudo-element with position absolute.
.img-block {
padding: 30px;
position: relative;
display: inline-block;
}
.img-block:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 75%;
background: #F9CDF1;
top: 50%;
left: 0px;
z-index: 1;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.img-block img {
position: relative;
z-index: 2;
}
<div class="img-block">
<img src="https://via.placeholder.com/490x590.png" alt="image" />
</div>

You can recreate an effect like this by utilising absolute positioning with a relative parent.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.imageWrapper {
background: rebeccapurple;
width: 200px;
height: 200px;
position: relative;
margin: 16px;
}
.imageWrapper img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="imageWrapper">
<img src="https://unsplash.it/180/220" alt="">
</div>
Ignore the body styles, they are just to illustrate the point better in the preview. The .imageWrapper and .imageWrapper img are the things you want to pay attention to.

Only last href is working

I'm building a website with HTML and CSS. I'm trying to make 4 images contained in a white rectangle, and when those images get clicked it takes you to another part of the page.
Unfortunately, only the last of the 4 images actually takes you to the other part of the page. The other 3 can't even be clicked on. If I delete the last image and the div class it's contained in, the "new" last picture will now work even though it did not previously work before.
I'm pretty sure this is a CSS problem, as when I commented out the CSS code of the rectangle div all the images were working links (though they were jumbled up as the CSS code for their parent class was commented out).
This is the CSS code of the rectangle class and the images contained in it:
#rectangle {
background: white;
width: 1000px;
height: 500px;
position: absolute;
left: 500px;
top: 200px;
text-align: center;
}
#rectangle h1 {
font-size: 50px;
position: relative;
top: 10px;
}
#rectangle .hardware {
position: relative;
top: 50px;
right: 340px;
}
#rectangle .software {
position: relative;
bottom: 200px;
right: 100px;
}
#rectangle .config {
position: relative;
bottom: 450px;
left: 120px;
}
#rectangle .code {
position: relative;
bottom: 700px;
left: 350px;
}
<div id="rectangle">
<h1>Welcome to the docs.</h1>
<h3>Learn how to build your own Olympia</h3>
<div class="hardware">
<img src="../assets/img/hardware.png" height="200px" width="200px" />
<p><b>Hardware</b></p>
</div>
<div class="software">
<img src="../assets/img/software.png" height="200px" width="200px" />
<p><b>Software</b></p>
</div>
<div class="config">
<img src="../assets/img/gear.png" height="200px" width="200px" />
<p><b>Config</b></p>
</div>
<div class="code">
<img src="../assets/img/code.png" height="200px" width="200px" />
<p><b>Code</b></p>
</div>
</div>
Any advice? Thank you!

change
position:relative;
with
display:inline-block;
like this:
#rectangle .software {
/* position: relative;*/
display: inline-block;
bottom: 200px;
right: 100px;
}
#rectangle .config {
/* position: relative;*/
display: inline-block;
bottom: 450px;
left: 120px;
}
#rectangle .code {
/* position: relative;*/
display: inline-block;
bottom: 700px;
left: 350px;
}

Just remove text-align: center; property from #rectangle

This happens because the last div covers the others. Therefore when you hover the other boxes, you are actually hovering the div of the last box.
Usually, using the dev tools in google chrome you can see what's happening actually.
Right click -> Inspect

How to make content appear before and after div

I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}

The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy

.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>

Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}

Keep img at the bottom of page

I know it's redundant question, but answers which I saw are unbelievable. Multiple lines for such easy task? No way.
I want to keep img at the end of page (not at the end of displayed screen - I have this issue now).
current, wrong code:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
}
I need a situation, when I will not be able to see the image until I scroll at the bottom of page.
I can't believe that there is no such option in CSS like bottom-page:0px
EDIT:

Meet CSS transform property - apply transform: translateY(100%).
See demo below:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
transform: translateY(100%);
}
<img id="footerimg" src="http://placehold.it/200x200"/>
EDIT:
Looking at the image added to the question, I think you don't need positioning - just put the img as the last element in the html markup.
A possible solution can be this:
.content {
height: 120vh;
}
section {
text-align: right;
}
img {
vertical-align: top;
}
<section class="content"></section>
<section>
<img id="footerimg" src="http://placehold.it/200x200" />
</section>

You need to define positioned relative block-level element at the end of body. This will create new block formatting context and all inside absolute positioned elements will be placed relatively to it.
Look at snippet example:
body {
width: 100%;
}
.blk1 {
display: block;
width: 100%;
height: 500px;
background: orange;
}
.blk2{
display: block;
width: 100%;
height: 300px;
position: relative;
background: #9c9;
}
img.btm {
position: absolute;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease;
}
.blk2:hover .btm {
opacity: 1;
}
<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>
Here is another solution:
body {
width: 100%;
position: relative;
}
.blk1 {
display: block;
width: 100%;
height: 200vh;
background: orange;
}
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-image: url('//placehold.it/100/100');
}
<div class="blk1">
</div>
So you can just add position: relative to body css styles
body {
position: relative;
}
and add body:after:
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
background-image: url('//placehold.it/100/100');
}

Your question is little bit making confusing me you mentioned in your question like that: "when I will not be able to see the image until I scroll at the bottom of page."
Then I think you do not need any effort you need just place image under footer container, when you will go bottom then you will be found at bottom of the page and this is very traditional way no need any tricky code for that.

How to resize to fit and center image in a position absolute div?

I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>

you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }

Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/

Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}