So how can I place a child element above its parent ::after pseudo-element? Basically I have a div with a background image with 2 pseudo-elements: a ::before, which is an absolute-positioned full-width and height, transparent blue and a ::after, which is an inset box-shadow, and now I'm trying to place child elements above all the parent's pseudo-elements. How can I do that?
Here's a jsFiddle: http://jsfiddle.net/got3e2vb/ - I want the white circle to be placed above the parent's ::after pseudo-element. How can I do that?
z-index is enough.
Try this:
#author {
width: 100%;
height: 683px;
overflow: hidden;
background: url('images/parallax/apartment1.jpg');
position: relative;
opacity: 1;
}
#author:after {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
box-shadow: inset 0 0 150px #072243;
content: ' ';
opacity: 0.5;
-webkit-transition: all .40s ease-out;
-moz-transition: all .40s ease-out;
-ms-transition: all .40s ease-out;
-o-transition: all .40s ease-out;
transition: all .40s ease-out;
}
#author:before {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: #1a6dd3;
content: ' ';
opacity: 0.8;
}
#author:hover:after {
box-shadow: inset 0 0 250px #0f3461;
opacity: 0.9;
cursor: pointer;
}
#author-preview {
position: absolute;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #fff;
top: 0px;
left: 0px;
z-index: 3;
}
<div id="author">
<div id="author-preview">
</div>
</div>
For a more general solution to the title:
#author:first-child::before {
//etc...
}
Related
Is there any way to make this same animation while also having a slanted background ?
either using pure css or react spring ?
Hover animation
i have tryed both solutions under but non of em go me slander background + the left to right, left to right animation.
HTML:
<div>Box</div>
How i want the slider to look like with slander.
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 150%; height: 100%;
background: #B17461;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
div:hover {
color: #fff;
}
div:hover:before {
transform: translateX(0) skewX(-45deg);
}
and under her is the animation goal:
div {
position: relative;
display: inline-block;
padding: 15px 70px;
color: #B17461;
font-size: 30px;
transition: color .5s;
overflow:hidden;
background: linear-gradient(#488566 0 0) no-repeat;
background-size: 0% 100%;
background-position: 100% 0%;
transition: background-size .4s;
}
div:hover {
background-size: 100% 100%;
background-position: 0% 0%;
transition: background-size .4s;
}
The task is to make a hover effect on some list element. When mouse-over - gradient fills list element with some color from top to bottom; but when mouse-leave - gradient should continue its moving from top to bottom. With simple hover effect it always moves backways.
I use Vue and Nuxt, I want to make it on pure CSS but it seems to me its not possible. How to do it?
https://codepen.io/nosdmitry/pen/zYZgNQp
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transform: translateY(-100%);
transition: transform .3s ease;
}
.test:hover::before {
-webkit-transition: border-radius 2s;
cursor: pointer;
transform: translateY(0);
transition: transform .3s ease;
}
My code with gradient:
.test {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
.test::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transition: all .3s ease;
background: linear-gradient(to bottom, blue 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
}
.test:hover::before {
background-position: top;
}
Do it like below:
.box {
width:200px;
height:200px;
border:1px solid;
background: linear-gradient(blue 0 0) top/100% 0 no-repeat;
transition:0.5s, background-position 0s 0.5s;
}
.box:hover {
background-size:100% 100%;
background-position:bottom;
}
<div class="box">
</div>
I'm using this simple css code by Tiffany Ong to generate a lightbox effect for my images. It works fine until I click an image further down the page; when I close the lightbox below the fold it brings me back to the top of the page rather than where I left off. Could someone advise me on how to fix this? Code is pasted below.
/*Eliminates padding, centers the thumbnail */
body, html {
padding: 0;
margin: 0;
text-align: center;
}
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: inherit;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work):
transition:background-image 0.2s ease-in-out;
.panel {
width:200px;
height:200px;
background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
transition:background-image 0.2s ease-in-out;
}
.panel:hover {
background:#000;
transition:background-image 0.2s ease-in-out;
}
<div class="panel"></div>
You can use this code:
Demo is here: https://output.jsbin.com/yadiwoviwe
.panel {
position: relative;
background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
width:200px;
height:200px;
transition: background-color 0.2s ease-in-out;
}
.panel:hover {
background-color: rgba(0,0,0,.5);
}
.panel:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
}
Unfortunately, you can't do this in this way.
The reason is that you're trying to animate the background-image property - a property that isn't animatable.
Instead, you can use a cool little trick that uses a pseudo-element to create the background image instead:
.panel {
width: 200px;
height: 200px;
position: relative;
background: pink;
}
.panel::after {
content: "";
position: absolute;
pointer-events: none;
background: url(https://unsplash.it/200) center center no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
will-change: opacity;
transition: opacity .1s ease-out;
}
.panel:hover::after {
opacity: 0.5;
}
<div class="panel"></div>
Inspired by this cool little article on CSSTricks
Alternatively, you can manipulate the opacity of the image.
.panel {
width: 200px;
height: 200px;
background: #000;
position: relative;
color: white;
text-align: center;
}
.panel:after {
content: "";
background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
background-size: 200px 200px;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.panel:hover:after {
opacity: 0;
}
<div class="panel"><h1>Text</h1></div>
Outdated answer, transition with image working currently with CSS.
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
background-image instead of 'all' and you'll see.
I'm having problems with getting any form of transition on this hover. I want it to appear a little slower than just abruptly when hovering over it. So maybe just a delay? Or an ease? Anyway I can't seem to get any of these things to work.
.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}
.forum-image:hover .descriptionbox {
visibility: visible;
}
.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png">
<div class="descriptionbox">
Testtesttest
</div>
</div>
Instead of using "visibility:hidden" try changing just the opacity, like so:
.forum-image:hover .descriptionbox {
opacity: 0.8;
}
And then put the transition code on the description box:
.descriptionbox {
/* Other properties... */
padding: 10px;
opacity: 0; /* Start opacity at 0, changes when hovered... */
transition: opacity 0.3s ease-in;
}
Now the description box has the transition property, and when the image is hovered, the new opacity is applied (with the transition time set in the original class). Then that new opacity class is removed when the mouse exits the area.
Make sure you remove
visibility: hidden;
from the original code, or you'll never see anything! (This messed me up at first when i was trying to fix it)
Here is a JSfiddle for demonstration
.forum-image {
position: relative;
display: inline-block;
}
.descriptionbox {
position: absolute;
background: #ffffff;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.descriptionbox:hover {
opacity: 1;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png" />
<div class="descriptionbox">
Testtesttest
</div>
</div>