Consider the following code (fiddle):
$("*").on("click", function(e) {
console.log(e.currentTarget.classList)
return false
})
.bg {
width: 500px;
height: 500px;
background: lightblue;
position: relative;
}
.positioned {
width: 400px;
height: 250px;
background: green;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.positioned_parent {
clip-path: inset(100% 0);
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
<div class="positioned_parent">
<div class="positioned">
</div>
</div>
</div>
I have used clip-path to remove .positioned_parent from view in the document. However it will still be the target of click events in Safari (but not Chrome).
I am looking for a way to use clip-path: inset() such that when I clip away a portion of an element the user will no longer be able to click on it. How can I accomplish this?
Related
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;
}
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.
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');
})
http://jsfiddle.net/cxwQF/12/.
Note: Red and green boxes should intersect. Green box is image or video. When hover it became yellow. But not on the bottom where the red box starts. Red box is control (for example, next image).
Question. How can I put parent div behind the image and child div to the top.
Markup:
<div id='image'></div>
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#image {
position: relative;
width: 100%;
height: 500px;
background: green;
z-index: 2;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
/*#parent:hover {
background: blue;
} */
#child {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: red;
z-index: 3;
}
How does this suit you? It's hard to know how to structure it without knowing what you are trying to achieve.
http://jsfiddle.net/cxwQF/21/
I've created another, invisible div for your 'child' but the original (foot) remains in the same place.
<div id='image'></div>
<div id='foot'>
</div>
<div id='parent'>
<div id='child'></div>
</div>
Sorry about the border styles its purely for test purposes.
I found the pure CSS solution. Markup remains the same.
CSS:
#image {
width: 100%;
height: 500px;
background: green;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
visibility: hidden;
}
#child:hover {
background: pink;
}
#child {
margin: 0 auto;
visibility: visible;
width: 100px;
height: 100px;
background: red;
}
Solution: #parent's "visibility" should be set to "hidden", #child's "visibility" should be set to "visible"
Fiddle is here: http://jsfiddle.net/cxwQF/22/