This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 4 months ago.
I am trying to use :before and :after with image but it is not working.
can I get your help?
<div class="services" id="services">
<div class="title">services</div>
<p class="slogan">Don't be busy, be productive</p>
<img class="image" src="/images/services.jpg" alt="services">
.services .image {
width: 250px;
float: right;
margin-right: 110px;
position: relative;
}
.services .image::before {
content: "";
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 0;
right: -50px;
z-index: -1;
}
elements such as audio, canvas, embed, iframe, img, input, object, and video not support :after and :before elements. This is because on render, their whole content will be replaced (including the psuedo elements)
You can try using js or jQuery instead.
Related
This question already has answers here:
I have position but z index is not working
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
UPDATE: This question was marked as duplicate by a friend, but I think the answer is still very valuable. I looked into those answers in duplicate questions and no one mentioned transform-style: preserve-3d can do transform without creating new stacking context. So this problem is more specific than how z-index works. It's also about how transform works.
I was trying to add some animation when hovering over a div element. But when I added transform in hover, its pseudo child element's background color covered div's. It seems that this wired behavior only happens when using transform. I want to know what's the mechanism behind this behavior.
In the following codepen example, the first one is hover with transform, the second one is normal hover.
https://codepen.io/neirongkuifa/pen/PgaEZd
.container {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin-bottom:100px;
}
.move:hover {
transform: translateY(3px);
}
.changeColor:hover{
background-color:white
}
.container::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: green;
width: 150px;
height: 150px;
z-index: -1;
}
<div class="container move">Content</div>
<div class="container changeColor">Content</div>
You are creating a new stack context, and the z-index behaves differently.
Your best solution is to handle everything using transforms. I have added a transformZ negative in the pseudo to move it backwards, and a preserve-ed on the item to make this work:
.container {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin-bottom:100px;
transform-style: preserve-3D; /*added*/
}
.move:hover {
transform: translateY(3px);
}
.changeColor:hover{
background-color:white
}
.container::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: green;
width: 150px;
height: 150px;
z-index: -1;
transform: translateZ(-1px); /*added*/
}
<div class="container move">Content</div>
<div class="container changeColor">Content</div>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
I created css button effect. I saw some people use negative z-index. I used it and it works properly but I'm confused by it's weird behavior.
I set '.container' position relative, '.btn' absolute,'a' relative and a::after absolute. I gave -1 z-index to 'a::after'. but why does not 'a::after' go under all elements. but when I set 'a::after' z-index 2 and 'a' z-index 3 button effect does not work as expected 'a::after' background color comes above the 'a'. why do these two methods work differently? why does not 'a::after' go under the all elements in first method.
Here is my css code:
.container{
position: relative;
width: 400px;
height: 300px;
background-color: #100f33;
margin: 0 auto;
}
.btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn a{
text-decoration: none;
color: white;
text-transform: uppercase;
display: block;
position: relative;
padding: 20px;
border: 1px solid #75230f;
width: 80px;
margin: 0 auto;
overflow: hidden;
}
.btn a::after{
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
width: 0;
height: 100%;
background-color: #840f38;
transition: all 0.3s;
}
.btn a:hover::after{
width: 100%;
}
<div class="container">
<div class="btn">
Click Me
</div>
</div>
z-index is a so different topic in css. If you want send :after area go to under. You need give z-index property to a element. (After this change you will lost your clickable link.)
Because:
z-index always work with parent element. If you add z-index: 1 to .btn class. You will create new layer for all .btn child elements.
If you want more information about z-index and layers. You should visit here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I have an issue where if I use $animate to add an animate.css infinite animation class to the parent div, here:
<div class="image-wrapper" ng-style="containerStyles">
<div class="image-helper">
<img ng-style="imageStyles" ng-src="{{content}}" />
</div>
</div>
The .image-wrapper div will animate but the image it contains will remain in place until I click the browser or change any CSS value in the inspector. Then the image snaps to where it should be animating and continues animating.
Here are the CSS styles that are also added:
.image-wrapper {
position: absolute;
overflow: hidden;
display: inline-block;
.image-helper {
position: relative;
height: 100%;
margin: auto;
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
}
This also happens if I use events instead of $animate.
Has anyone experienced something similar? Does anyone know a workaraound?
Applying transform-style: preserve-3d; to the parent element fixed this issue. It was not related to $animate.
I'm trying to get a ribbon-like banner effect for a header:
My markup is this:
<header>
<div id="logo">
<img src="">
</div>
</header>
I was thinking I could use pseudo :before and :after elements on the <img>, creating extra white space above and below the image to fake the extended `div:
#logo-wrap img:after {
content: '';
display: inline-block;
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: #000;
}
And then another :before and :afterpseudo elements for the "shadow-fold".
My problem is: if I end up doing it like this, I'll have to insert another div between #logoand <img> in order to add another pair of :before and :after pseudo elements for the bottom "shadow-fold" and I think I'm having problems using the pseudo elements on the <img> element (nothing is appearing).
Can you shed some light and guide me on the right direction, pls? Perhaps, there is a simple way to just "shrink" the <header>?
EDIT
So, :before and :after can't be used with <img>. Thank you for the info :)
What I would like to know is if there is another way to achieve what I desire instead of wrap-wrap-wrap? :P
i.e: is there a way to make the #logo be bigger than <header> despite being its child and its height being the same (since the <header> has always the same height as the <img>)?
Thanks
I think you're on the right track. I would use borders, but I would make your pseudo-elements be behind the logo like so:
body,html {margin: 0; padding: 0;}
header {
background: #eee;
text-align: center;
margin: 1em 0;
}
#logo {
display: inline-block;
vertical-align: top;
position: relative;
margin: -0.5em 0;
}
#logo:before, #logo:after {
content: '';
position: absolute;
width: 100%;
left: -0.25em;
border: 0 solid transparent;
border-width: 0.5em 0.25em;
color: #aaa; /* set so we only have to have the border color in one place.
if not specified, border color is the same as the text
color. */
}
#logo:before {
border-top: none;
border-bottom-color: initial;
top: 0;
}
#logo:after {
border-bottom: none;
border-top-color: initial;
bottom: 0;
}
#logo img {
position: relative;
display:block;
z-index: 1;
}
<header>
<div id="logo">
<img src="//placehold.it/300x100?text=LOGO"/>
</div>
</header>
The concept is that the pseudo-elements are 100% width of the logo with a little bit extra (determined by the border attributes). Then you use both left and right borders simultaneously. There's a few other tricks in that code that help simplify it, but the general idea is to let your pseudo-elements peek out from behind the logo itself.