I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside.
example :
<div class="wrapper">
<div class="box-content">
<div class="fixed-element">
</div>
</div>
</div>
<style type="text/css">
.wrapper {
transform: translateX(50px);
background: pink;
}
.box-content {
height: 1000px;
background: green;
}
.fixed-element{
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: blue;
}
</style>
https://jsfiddle.net/aobv5azy/
I don't want use javascript, and I want use transform translate. Animate with "left" is not good for performances.
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
Trying to add an image overlay on hover but it returns the background under the image and the image stays on top how would I fix this
<div class="slider-inner pop parentSlider-cell content_overlay">
<?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' => 'img-responsive myImg', 'data-track-content' => '']); ?>
</div>
.content_overlay{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
&:hover{
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999;
}
}
Why isn't it working?
The question asks what is the problem with the overlay not overlaying the img.
The basic problem is that the img is within a div which is being used as the overlay, so when the overlay z-index is increased on hover the whole lot 'moves forward' on the z-access so their relative positions on that axis are not changed.
If we separate out the img from the overlay and make sure the overlay stacks over the img then the hover will work.
Here's a simple example, maintaining all the CSS given in the question but separating the overlay element from the containing element. Obviously in the real version the php takes the place of the img element here. img and overlay are given position absolute so they sit in the same place.
<!DOCTYPE html>
<html>
<head>
<style>
.content_overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
rbackground-color:transparent;
}
.content_overlay:hover{/* taken out the & and written as pure CSS rather than SCSS/SASS */
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999; /* kept this but not strictly necessary */
}
</style>
</head>
<body>
<div <div class="slider-inner pop parentSlider-cell" style="width: 100px; height: 100px; position: relative;"> <!-- given style just for this demo -->
<img src="" style="width:100%;height:100%;background-color:blue;position:absolute;"/> <!-- using a blue square img element just for this demo -->
<div class="content_overlay"></div>
</div>
</body>
</html>
You can hide an image with an overlay like so:
.container {
position: relative;
width: 220px;
height: 220px;
background-color: gray;
}
#image, #overlay {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
}
#image {
background-image: url('https://www.licg.nl/media/1287/duitse-dog740x433.jpg');
background-size: cover;
background-position: center;
z-index: 1;
}
#overlay {
visibility: hidden;
background-color: red;
z-index: 2;
}
.container:hover #overlay {
visibility: visible;
}
<div class="container">
<div id="image"></div>
<div id="overlay">This image is now hidden</div>
</div>
I'm not sure if I understood the question properly, but if you want to hide/show an image on hover it would be something like so:
<div class="content_overlay">
hover to show image
<img src="https://placeimg.com/640/480/any" />
</div>
.content_overlay img {
display: none;
}
.content_overlay:hover img {
display: block;
}
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
</div>
The css look like this
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width:500px;
height:420px;
margin:0 auto;
position: relative;
top: -200px;
}
while pushing a negative top, the silbing div "footer" will not move up accordingly. That's a large empty space in between two divs
This is my code
http://codepen.io/adrianmak/pen/qZRqwy
Give margin-top:-200px instead of top:-200px. As it is relative element. It will take space even if you are moving it by giving negative top.
.featured {
background: yellow;
width:500px;
height:420px;
margin:-200px auto 0;
position: relative;
}
Working Fiddle
I hope you want this
.wrapper{
position: relative;
}
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width: 500px;
height: 420px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 200px;
}
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
<div class="footer">
</div>
</div>
It's because you are using position relative. When you add top-200px it move that <div> up but did not leave his space, you need to use position absolute or negative margin(-ve).
jsfiddle.net/zrsgb2rd/
Imagine this kind of strucure :
<div class="background">
<div class="object"></div>
</div>
<div class="foreground"></div>
My foreground totally overlays my background
In my CSS I would like to change object property on hover (ie .object:hover{} )
Is there way to do that in CSS without moving my object inside foreground or using js ?
Update : My css as asked.
.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
position: absolute;
top:10px;
left:10px;
opacity:1;
}
.object:hover
{
opacity:0.5;
}
The answer is kind of. You can use sibling selector (+), but you must revert order of your divs.
Example CSS:
.background {
position: absolute;
width: 600px;
height: 400px;
background-color: red;
}
.foreground {
position: absolute;
width: 300px;
height: 200px;
left: 150px;
top: 100px;
background-color: green;
z-index: 1;
}
.object {
width: 600px;
height: 400px;
}
.foreground:hover + .background .object {
background-color: blue;
}
and HTML:
<div class="foreground"></div>
<div class="background">
<div class="object"></div>
</div>
Working sample: http://jsfiddle.net/pBYwT/1/
Higher z-index for div:hover which you want to display on top.
I'm trying to built up a small webpage, which is based on 3d boxes.
This page will be scrollable, and i want the vanishing point to stay fixed in the middle, so when I scroll the 3d boxes should change their look dynamically. The only result I was able to get is this: http://deesr.com/3dscroll/
In this Version the vanishing point stays at the starting point, and when i scroll the boxes stay the same.
EDIT: JS did the job. I used the OnScroll event to check the scroll position and re-setting the Perspective-Origin. Let me know if there's a better solution!
I know it is to late for the OP, but for all others coming across this question:
I was able to solve it by using a <div> inside the body that is emulating the body's scrollbars.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
</style>
</head>
<body>
<div>
3d objects
</div>
</body>
</html>
Full example:
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
body > * {
overflow: auto;
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
div#container {
width: 200%;
transform-style: preserve-3d;
}
#t,
#b,
#l,
#r {
margin-left: 45%;
margin-right: 45%;
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid black;
border-radius: 10px;
transform-style: preserve-3d;
}
#t {
transform: rotateX(270deg);
}
#b {
transform: rotateX(90deg);
}
#l {
position: relative;
top: 180px;
left: -60px;
transform: rotateY(270deg);
}
#r {
position: relative;
top: -180px;
left: 60px;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="container">
<div id="l">
<h1>left</h1>
</div>
<div id="t">
<h1>top</h1>
</div>
<div id="b">
<h1>bottom</h1>
</div>
<div id="r">
<h1>right</h1>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
My solution was that I reset the vanishing-point every time the user scrolls.
$(window).scroll(function() {
var scrollLocation = $(document).scrollTop();
var vanishingPoint = scrollLocation + window.innerHeight / 2;
$("#wrapper").css('-webkit-perspective-origin', ' 50% ' + vanishingPoint + 'px');
})