I am trying to enable a user to drag an image (e.g. a face) on another image (e.g. a map square). I implemented the drag&drop with an Angular directive and it kinda work. What is not working is the position of the dropped image (the face): it is not overlaying, but it is being placed below the map square.
The starting HTML code is generated via ng-repeat, but the resulting element is this:
<span style="display: inline-block;position:relative;">
<img src="map_square.jpg" class="map-image">
</span>
When dropping, it becomes:
<span style="display: inline-block">
<img src="map_square.jpg" class="map-image">
<img src="face.jpg" class="face-image-on-map">
</span>
This is my CSS code:
.map-image {
position: relative;
max-width: 42px;
z-index: 0;
}
.face-image-on-map {
position: absolute;
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
As a result of this, I would expect the face image to be over the map square, both being inside the span-delimited area (42*42px).
Instead, the face image is outside the span area, below the map square (actually, it is over another map square image, i.e. the one below the actual target).
Changing position of the face causes the face image to be placed on the right of the target (far away from it).
How can I fix this?
I think you're missing the top and the left property in .face-image-on-map.
So I would recommend this:
.face-image-on-map {
position: absolute;
top: 0; /* Positoning: distance from top border */
left: 0; /* Positioning: distance from left border */
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
(See the W3Schools page for more information)
Hope this is want you wanted :)
Related
I am currently creating a custom media player for a customer with HTML and javascript. The customer only needs to add an empty element containing necessary data-attributes (such as preview-image, srcset, URL) to the site for the script to create a player unit.
The image and the media are siblings within the wrapping parent.
A click on the play button basically just hides the image and displays the media.
Player unit markup:
<div class="wrapper">
<img class="preview-img" src="...">
<button class="play-button">Play</button>
<iframe class="embedded-media hidden">...</iframe>
</div>
The website owner now wants the size of the player to be dependent on the size of the preview image or srcset.
I tried to use the image as wrapper, but it's not a container element.
Is there any way to size the parent depending on the images size?
Set any other element (except the image) inside the wrapper absolute and wrapper itself a inline-block, to allow automatic width. Then image makes wrapper to be the same ratio or size as itself.
When hiding the image after click, use relative positioning and z-index lower than the iframe (for example 10 in my example).
Set iframe size to 100%/100% to cover the same area as image and wrapper.
<style>
<!--
.wrapper {
display: inline-block;
position: relative;
}
.play-button {
position: absolute;
z-index: 30;
top: 0;
left: 0;
color: red;
}
.preview-img {
position: relative;
z-index: 40;
display: block;
width: 500px;
}
.embedded-media {
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
-->
</style>
<div class="wrapper">
<img class="preview-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png">
<button class="play-button">Play</button>
<iframe class="embedded-media hidden">...</iframe>
</div>
I have two canvas.One of them is a picture of a room and the other one is a picture of a chair.I have two question:
First:How to put these two canvas with images on each other?
Two: My first canvas which contains the image of the room is about 7 meters in width and the chair is about 80cm in width.By the way it's not the size of images.It's the size of their view.How should I put the second one according to the first one?
Thanks
I'm not sure why you keep referencing to a "canvas" as I can't see why you'd need canvas when you can just use images, but you can just use position: relative; on your parent element and then position: absolute; on your children elements, for example:
<div class="canvas">
<img class="canvas__item" src="images/room.jpg" alt="The room">
<img class="canvas__item canvas__item--chair" src="images/chair.jpg" alt="The chair">
</div>
Or if using the <canvas> element (which I cannot tell without any code in your question):
<div class="canvas">
<canvas class="canvas__item canvas__item--room"></canvas>
<canvas class="canvas__item canvas__item--chair"></canvas>
</div>
And in your CSS:
.canvas {
position: relative;
width: 720px; /* Define the width of your main image, in your case the "room" */
height: 460px; /* Define the height of your main image, in your case the "room" */
}
.canvas__item {
position: absolute;
}
.canvas__item--room {
top: 0;
left: 0;
}
.canvas__item--chair {
top: 10px; /* Define the offset position of your chair image here */
left: 80px; /* Define the offset position of your chair image here */
width: 60px; /* Define the width of your chair image here */
height: 180px; /* Define the height of your chair image here */
}
I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.
html:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js: (i did the styles in js b/c I was interested in learning how to do it that way):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
Thanks for any help, please let me know if I can answer questions.
UPDATE:
Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?
Here is an example of what is happening:
http://oi61.tinypic.com/2mw9egx.jpg
Notice the orange border is ontop so it is definitely ontop.
UPDATE 2:
This should make it really clear what I want. Again sorry for the confusion:
http://oi59.tinypic.com/eamb0n.jpg
I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.
Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.
Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.
You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
EDIT
The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.
Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.
This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
Not perfect but I'm unsure of how else to proceed.
EDIT 2
It seems the OP wants to do a form of masking. You can do this with overflow: hidden.
I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/
In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.
To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.
This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
Have you tried the css opacity property ?
#clown1{ opacity:0.3;}
make both images' position absolute instead of relative
for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
forget zIndex - all else being equal, the latter element will be "topmost"
put all the above in a CSS style sheet instead of in JS code!
Forgetting the other transformations and margins, etc, the core CSS that you need is:
#images {
position: relative;
}
#divbox, #clown1 {
position: absolute;
}
Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.
CSS:
.parent > img.transparent {
position: absolute;
}
.parent > img {
position: absolute; opacity: 0.5
}
HTML:
<div class="parent" style="position:relative">
<img src="other.png" class="transparent"/>
<img src="transparent.gif"/>
</div>
Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window
I need a rollover popup based on mouse click location (I cannot exactly use a CSS absolute positionined div inside a relative one for this, since that kind of crops my popup...reason being I have overflow:hidden for layout purpose)
So I cannot use this;
<div class="wrapper">
<ul class="popup"><li> item 1</li><li> item 2</li></ul>
<img src="someImg.gif" width="100" height="100"/>
</div>
.wrapper {
position: relative;
}
.popup {
display: none;
position: absolute;
bottom: 105px;
left: 10px;
}
.wrapper:hover .popup {
display: block;
}
So can I get something based on mouse cursor location and it should be completely fluid (no fixed "px" value and should adjust as the browser is resized)
Thank you.
well u are on the right way to prevent the cropping of pop up give the class css z-index of a 1000+ value n d class wrapper a z-index of less or -1 value
I'm looking to do something like this but with CSS or JavaScript.
I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?
Am I even asking the right question?
EDIT:
Well here is a great submission but I have a follow up question:
I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.
Any advice?
You could use background-position with absolutely positioned divs as follows:
CSS:
.container {
position:relative;
height:455px;
width:606px;
}
.container div {
position:absolute;
background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}
.container .bg-image {
opacity:0.3;
height:455px;
width:606px;
}
.container div.highlight-region {
height:50px;
width:50px;
opacity:0;
}
.container div.highlight-region:hover {
opacity:1;
}
HTML:
<div class="container">
<div class="bg-image"></div>
<div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
<div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>
Please see http://jsfiddle.net/MT4T7/ for an example
Credit to beachphotos.com for using their image.
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.
CSS changes:
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */
You can probably fake it, here is a sample:
http://jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.
You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.
These are the steps you can take to highlight a part of an image:
Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
When the user hovers over the images' container, adjust the opacity of the first image.
I can provide more technical details on this later if need be.
What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
This answer is only a proof of concept
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.img {
position: absolute;
top: 0;
left: 0;
}
.img-base {
opacity: 0.3;
z-index: -99;
}
.img-overlay {
opacity: 1.0;
}
.cropper{
width: 150px; /* input width and height of the box here */
height: 120px;
overflow: hidden;
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
position: absolute;
left: 0px; right: 0px;
margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-base">
<div class="cropper">
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-overlay" id="overlay1">
</div>