how to prevent image from overlapping each other - javascript

I have a png of a trashcan icon at the right top of it parent div:
<div id="image_part">//width: 700, height:500
<img id="preview_pic" alt="" src=""> //this is where I load image
<img style="float:right;cursor:pointer; margin-top:10px;margin-right:10px;" title="delete this photo" src="img/trashcan1_icon.png" height="20" width="20">
</div>
When I load an image, if the image size is smaller than its parent size(which is image_part), then the image should be at the center of the div image_part, and still have margin between the div image_part and the image and the trashcan is visible. However, if the image is big enough to occupy all the parent div image_part without any margin or space, then the trashcan icon becomes invisible. What I want is for the trashcan icon to be at the top of the image itself.

You should propably bind the size of the image to a maximum: Use max-height: 500px, max-width: 700px (Or slightly smaller values so you have a margin).
You also can use z-index on the elements - either give the preview_picture a negative value or the trashcan a positive one (bigger than 1).

Rearrange the html like so:
<div id="image_part">//width: 700, height:500
<img style="float:right;cursor:pointer; margin-top:10px;margin-right:10px;" title="delete this photo" src="img/trashcan1_icon.png" height="20" width="20">
<img id="preview_pic" alt="" src=""> //this is where I load image
</div>

You can get this done with just CSS. Just center the #preview_pic both vertically and horizontally then apply max-width and max-height so you can preserve the aspect ratio of the image, then z-index the trashcan higher that the image.
#image_part {
width:700px;
height:500px;
border:1px solid #666;
position:relative;
}
#trashcan {
z-index:3;
position:absolute;
top:10px;
right:10px;
cursor:pointer;
}
#preview_pic {
z-index:2;
max-height:500px;
max-width:700px;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
See this example: http://jsfiddle.net/vD2u8/

Related

CSS Image overflow hidden without stretch

I am trying to reduce the thumbnail's height without stretching the image. Despite I wrote my code in React I know is pure CSS.
For example, I used a sample screenshot from Wikipedia, its height is too large to fit "in a thumbnail" so I need to reduce it so a JavaScript library can autoscroll it when hover event is triggered (but this is a future step).
The following image is how the thumbnail should look like:
Instead it displays the whole image, as you can see below:
.image {
width: 200px;
}
.image-link {
height: 400px;
overflow: hidden;
}
<a class="image-link" href="#">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>
So, how can I reduce the image's height without stretching it or overflowing the a?
Add display: block; (or inline-block, depending on the situation) to the class of the a tag, otherwise it's an inline element on which your height setting (and with it the overflow: hidden) won't have any effect:
.image {
width: 200px;
}
.image-link {
display: block;
height: 400px;
overflow: hidden;
}
<a class="image-link" href="#">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>
I found this answer:
( Overflow: hidden is not working with images ).
You need to add a wrapper element with all scaled images contained as the thing that is affected by overflow.
The images can then be adjusted in relation to that wrapper class.
.image {
width:200px;
height:200px;
overflow: hidden;
}
.image-link {
width: 400px;
height:400px;
background-color:red;
}
.imageScale{
width:200px;
}
<a class="image-link" href="#">
<div class="image">
<img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="imageScale" />
</div>
</a>

Is there a way to auto add gradient to images?

Here is my code:
<div class='my-posts-container' id='<%=postobj._id%>'>
<%var menuid='menu'+postobj._id%>
<%var imagesource='../'+postobj.blob.path%>
<div class="my-posts-container-header">
<%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%>
</div>
<div class="menu hide" id="<%=menuid%>" >
<ul >
<li><button onclick="viewpost('<%=postobj._id%>')" >view</button></li>
<li><button onclick="removepost('<%=postobj._id%>')" >remove</button></li>
<!-- <li><button onclick="copypostlink('<%=postobj._id%>')" >copy link</button></li>
<li><button onclick="editthispost('<%=postobj._id%>')" >edit</button></li> -->
</ul>
</div>
<div class="post-image" >
<img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
</div>
<span>
<%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
</span>
<hr>
<div class="caption">
<%=postobj.caption%>
</div>
I want to keep my image size as 400px *400px
but add a background colour .post_image div,
basically, I want to add a gradient to the background based on any image in the image tag, something like this,
so that the whole 400 X 400 size is covered is this possible to achieve, if not can you suggest me other options, Thanks.
You can achieve something similar with CSS
Considering using this stylesheet
<style type="text/css">
.blured {
width:320px;
height:320px;
position: relative;
overflow: hidden;
}
.blured .blur {
height:70px;
width:100%;
position:absolute;
filter: blur(7px);
}
.blured .top {
top:0px;
background: linear-gradient(#000000d9, #00000000)
}
.blured .bottom {
bottom:0px;
background: linear-gradient(#00000000, #000000d9)
}
</style>
Then use the following markup
<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
<div class='blur top'></div>
<div class='blur bottom'></div>
</div>
The result will be something like this:
You can experiment with linear-gradient colors and the value for blur() to achieve an output close to your requirement.
References:
filter:blur()
background: linear-gradient
The effect you describe can actually be achieved. You just need to stack the same image with a smaller size on top of the image. The image underneath can then be blurred out and it will span the remainder of the 400px x 400px area.
To do this, you need to set the position field of the enclosing div to relative and that of both the images to absolute. I have reduced the height of the image sitting on top to 200px and kept the image width the same as the image underneath to resemble the style of the image in the question. Use filter: blur() to blur out the larger image.
Blurring softens the edges of the image (Remove the clip property and you'll know). Use the clip property to make the edges look "crisp".
I have used this image.
Run the code snippet below to see it in action:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
This answers part of your question. Now, to automate the image placement as per size, you can retrieve and update the image dimensions using JavaScript:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
The image underneath will always be 400 x 400 px, you can update the attributes of the image on the top as per its actual retrieved dimensions if it is smaller than 400 x 400 px. Otherwise, squash it down to 400 x 400 px to cover the entire image underneath.

Is it possible to achieve this zoom & pan effect on a direct image and not a div with a background-image?

I found this codepen showcasing a zoom and pan effect for images. As far as I can tell, the code works by assigning a background-image to each div based on its data-image attribute. Is there any way that I can do this on a direct img tag instead of a div with a background-image?
EDIT: This is the kind of mark-up I'm talking about. A container div with an actual img tag inside of it.
Take a look at the CodePen now.
Think i got it to look kinda like you want it
<div class="tiles">
<div data-scale="1.1" class="product-single__photos tile" id="ProductPhoto">
<img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/bluza_dama_39377a_large.jpg?v=1487178925" alt="Last Skirt" id="ProductPhotoImg">
</div>
</div>
You can play with the margin to adjust the image position
div{
width:100%;
height:200px;
overflow:hidden;
}
img{
width:100%;
margin:0%;
transition:0.5s;
}
img:hover{
width:120%;
margin:-10;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg">
</div>
Absolutely. It would involve giving the elements some CSS:
div.product-single__photos {
position: relative;
overflow: hidden;
}
div.product-single__photos > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
And have the Javascript manipulate the <img>'s width, height, top and left properties.

Watermark image on hover

I have image field, and im trying to get watermark on it, while hovering this image. I tried simple img:hover, but the hover image still under my main img. Any ideas how can i make my hover image to be higher then my main img.
Try this - http://jsfiddle.net/2UQ6N/
<div>
<img src="http://lorempixel.com/300/200" />
<img src="http://cdn-img.easyicon.cn/png/270/27093.png" class="watermark" />
</div>
div {
position: relative;
display: inline-block;
}
div:hover img.watermark {
display: block;
}
img.watermark {
position: absolute;
bottom: 0;
right: 0;
opacity: .6;
display: none;
}
You need to put the hover image later in the document flow or increase the z-index to be higher than the image it is covering.
As people will no doubt mention, this will not stop people from getting hold of your image if they want to.
You have to set a position: relative to put an image on top.
<img src="images/image1" width="225" height="219" border="0">
<img src="images/image2" width="250" height="372" border="0" style="position: relative;>
So on your :hover you add the position: relative to your top image.

How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!
(source: tumblr.com)
I tried giving the div that has a set width and height overflow:hidden; but that didn't work... I searched all over and I probably just didn't word it right.
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!
HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS
.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}
#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}
#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}
Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.

Categories