I need to positionate several dots on one image with css.(see example)
I'm using the code below (for dot number 1):
<div id="photo1">
<div class="dot" style="left:calc(50px - 20px); top:calc(553px - 20px);">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
and css :
#photo1 {position:relative; width:100%;}
.dot {position:absolute; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
I don't have any problem still my picture width is 100% (e.g 580px). My coordinates x and y are calculted for that.
But, if I reduce my screen width (smartphone or tablet), the current image width is less than 100%.
If I supposing that the image width is 60%, how can I write something like this :
style="left:calc((60% * 50px) - 20px);top:calc((60% * 553px) - 20px);
to adjust position of my first dot regarding the current image width.
Do you have any ideas ?
Thanks a lot for all replies or suggestions.
Here is an example using percentage positioning:
https://codepen.io/lokase/pen/MWaxgjq
HTML:
<div class="con">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>
CSS:
.con {
max-width: 600px;
position: relative;
}
.dot {
background: red;
border-radius: 50%;
height: 20px;
position: absolute;
width: 20px;
}
.dot1 {
top: 10%;
left: 10%;
}
.dot2 {
top: 30%;
right: 20%;
}
.dot3 {
bottom: 40%;
left: 50%;
}
img {
width: 100%;
}
try positioning the elements using %. That would alter the width as the element's width changes.
Try something like this.
I have made it fixed to bottom.
For left I have given 10%, but you can change that to your requirements (580/30=19.33%).
#photo1 {position:relative; width:100%;}
.dot {position:fixed; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
<div id="photo1">
<div class="dot" style="left:10%; bottom:0px;">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
Related
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
I'm trying to overlay this card that says "A, Snare" with a 30% top and 30% left over the canvas but get this trailing white space to the right of the canvas. I've attached a picture with the "div.content" highlighted to show you what I mean. How can I get this card to float above the canvas without any resulting whitespace?
Trailing white space.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
width:100%;
left: 30%;
top:30%;
right:-30%;
position:relative;
}
.card{
background-color:green;
width:3%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
You currently have the width of the content set to 100%. This means that this div has a width of 100% of the screen.
Your margin-left is 30%, making the total width 130%. Make your contenta width of 70% and the problem is solved, as that totals to 100%.
Edit: I made the card wider to show the text, just so you know.
#canvas{
background:black;
width:100%;
height:100%;
position:absolute;
z-index: -1;
overflow: hidden;
}
body, html{
height:100%;
margin:0;
}
.content{
display:inline-block;
left: 30%;
top:30%;
width: 70%;
position:relative;
}
.card{
background-color:green;
width:10%;
height 100%;
border: white solid 2px;
}
<body>
<canvas id="canvas" resize hidpi=off></canvas>
<div class="content">
<div class="card">
<h1 class="card__title">A</h1>
<p class="card__description">
Snare
</p>
</div>
</div>
</body>
How can I insert two images in css, center them ?
I would like to have something like that: link
My actual css look like this, with one image centered :
position: absolute;
top: 0;
bottom:0;
left: 0;
right:0;
margin: auto;
u can use margin-top or right and set position:absolute for img element in css
Live DEMO
CSS:
img{
position:absolute;
margin-top:100px;
right:25%;
width:50%;
}
#leftdiv{
position:relative;
float:left;
background: #e7e7e7;
height:500px;
width:50%;
}
#rightdiv{
position:relative;
float:right;
height:500px;
width:50%;
background: green;
}
HTML:
<div id='leftdiv'>
<img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
<div id='rightdiv'>
<img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
modifying the answer of this example : link
check that demo
css
.image_container {
width: 50%;
height: 300px;
line-height: 300px;
background: #eee;
text-align: center;
float:left;
}
.image_container img {
vertical-align: middle;
}
Html
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
,also you can check that page
Set width for image container.
Set margin : 0 auto;
I'm trying to grey out a section of an image (two stripes at left and right). Is there a way to do this using just CSS?
I know I can use filters (i.e. filter: grayscale(100%)), but I don't want the entire image to be grey.
Pure CSS Solution with no extra markup
JSFIDDLE DEMO
HTML
<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>
CSS
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}
.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}
Put a div over it.
<div id="wrapper">
<img src="path/to/file.jpg" />
<div id="filter">
</div>
<style>
#wrapper {position: relative;}
#filter {
position: absolute;
top: 123px;
left: 123px;
width: 42px;
height: 42px;
background: rgba(255,0,0,0.5);
}
</style>
http://jsfiddle.net/BQ7J3/
If you do indeed wish to use the greyscale filter you will need to have two images on top of each other, one with the greyscale filter applied and clipped to the size you wish.
<div class="image-container">
<img class="image-grey clip" src="http://placekitten.com/200/150" />
<img class="image-coloured" src="http://placekitten.com/200/150" />
</div>
and
.image-coloured {
z-index: 0;
position: absolute;
}
.image-grey {
z-index: 1;
position: absolute;
-webkit-filter: grayscale(100%);
}
.clip {
clip: rect(0px,60px,150px,0px)
}
Fiddle
#col{
width:200px;
float:left;
overflow:visible;
position:relative;
z-index:2;
}
<div id="col">
<img style="margin-left:-6px; z-index:999; position:relative;" src="img.jpg" />
</div>
I want the image to stick out to the left by 6px but it is being cut off.
Also do I have to put 4 spaces in font of every line of code this is very slow!
your image is being cutt-off, because you are using overflow on your parent div#col
<div id="col">
<img src="img.jpg" alt="some info">
</div>
CSS
#col{
width:200px;
float:left;
position:relative;
/*overflow: visible;*// remove
/*z-index:2;*// no need to do that
}
#col img {
position: absolute;
top: 0;
left: -6px;
width: width of image in px;
height: height of image in px;
}
Is this what you're looking for?
http://jsfiddle.net/qPhba/