I'm trying to achieve the following:
I have an image in the background and a moving element in the foreground. I want to show the foreground element only while it's overlapping the background element. In the snippet below, the globe represents the background element, and the red square is the foreground element.
Here is a demonstration what I want it to look like:
The first things that came to mind were the css clip-path and mask-image properties, but I couldn't really get it to work.
Thanks in advance!
.world {
position: absolute;
top: 100px;
left: 100px;
}
.world img{
width: 300px;
height: auto;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 75px;
top: 200px;
}
<div class="world">
<img src="https://png2.kisspng.com/sh/bfd975773964bd26a28b9eecfb96b970/L0KzQYm3U8I6N5hwj5H0aYP2gLBuTgdwep1pRdl1b3LoPbTzigAuaaN5RddqcoTrPbTokwRwd58yTdNrZETkdom4VvU3QWczUKgBMEK2R4a4VcIzO2Y5UaUBMEm2SHB3jvc=/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696.8660237515223549360938.png"/>
</div>
<div class="testelement">
</div>
Here is an idea with mask. Simply use the same image inside the mask on the container where the size is defined by the image. Then make the red square inside that container:
.world {
position: absolute;
top: 100px;
left: 100px;
width:300px;
-webkit-mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
}
.world img{
width: 100%;
display:block;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: -20px;
top: 150px;
transition:1s all;
}
.world:hover .testelement{
left:20px;
}
<div class="world">
<img src="https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png">
<div class="testelement">
</div>
</div>
Related
I would like to use an htmlcanvas a canvas as the background of a webpage and then have various Vuejs components rendered on top of it.
I am sure the information is out there I just don't know what to search.
You can style any element using CSS with position: absolute to overlay the element on top of the canvas.
.container {
position: relative;
width: 300px;
height: 300px;
}
.canvas {
width: 300px;
height: 300px;
background-color: yellow;
}
.overlay {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: orange;
}
<div class="container">
<canvas class="canvas"></canvas>
<div class="overlay">
This is displayed on top of the canvas
</div>
</div>
I am creating a website and would like a user to be able to hover their mouse over an image and get more information about the image. I have this working correctly but I cannot figure out how to darken the other images that are not selected. Ideally I would like to create an overlay div using html and css that exactly matches the dimensions of a responsive image. When not hovered over this overlay div would use a transparent color to darken the image a bit. How can I make this div responsive to the image?
Here is my codepen to see what I am talking about
https://codepen.io/klaurtar/pen/NJgrOR
.overlay {
width: 55%;
position: absolute;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
&--p1 {
left: 0;
top: -2rem;
height: 20rem;
}
&--p2 {
right: 0;
top: 2rem;
height: 20rem;
}
&--p3 {
left: 20%;
top: 10rem;
height: 22rem;
}
}
.wrapper {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
background-color: #000;
opacity:0.8;
}
<div class="wrapper">
<img src="https://unsplash.it/320/240" />
<div class="overlay"></div>
</div>
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
I need to make such an effect (jsfiddle), but with two photos.
It occurred to me to use skewed div who would hide part of the image and the second image is below.
And I know not how.
Please help me.
I thank you.
Code:
html:
<div id="container">
<img src="https://s31.postimg.org/l6m2amhm3/img.jpg">
<div class="man">
<div class="color"></div>
</div>
</div>
css:
#container {
height: 400px;
width: 700px;
position: relative;
}
#container div, #container img {
height: 100%;
position: absolute;
}
.man {
margin-left: 50%;
width: 50%;
}
.man:hover > div {
margin-left: -10%;
width: 25%;
}
.color {
background-color: rgb(181, 230, 247);
margin-left: 20%;
transition: all 0.5s;
transform: skewX(11deg);
width: 0;
}
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}