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.
Related
I'm trying to change an image on hover and back again.
The idea is that when I hover over an image, it fades into a different image and when my mouse leaves, the image fades back to the original.
Here is what I have tried so far, using jQuery:
<img src="https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png" />
<script>
$("img").hover(function(event) {
event.preventDefault();
console.log("hover");
$("img").fadeOut(400, function() {
$("img").attr("src", "http://files.softicons.com/download/animal-icons/meow-icon-set-by-iconka/png/128x128/cat_purr.png")
}).fadeIn(400, function() {
$("img").attr("src", "https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png")
});
});
</script>
You can actually do this with plain CSS and it would be more efficient.
Just create a div, put both images inside, absolute position so one is on top of another, and when hover apply opacity: 0 with a transition to the front image.
You can achieve this with position absolute, z-index, and hover pseudo selector.
.container{
width: 300px;
height: 300px;
position: relative;
}
img{
position: absolute;
top: 0;
left: 0;
}
.img-top{
z-index: 999999;
transition: 0.3s linear all;
}
.img-top:hover{
opacity: 0;
}
<div class="container">
<img class="img-bottom" src="https://www.cesarsway.com/sites/newcesarsway/files/d6/images/askthevet/checklist.jpg" alt="">
<img class="img-top" src="https://i.ebayimg.com/images/g/k2gAAOSwT5tWKhVS/s-l300.jpg" alt="">
</div>
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.
I am using this code http://cssdeck.com/labs/pa0yqlki that displays a canvas covering the size of the browser's window.
I am able to display content on top of the canvas (by using absolute positioning and z-index: -1)
What I am not able to do is add content AFTER the canvas.
Once the canvas ends, and so does the window, I want to have an <h1> lets say. So a scroll bar should appear when the page is loaded I should be able to scroll a bit more so that I see the <h1>.
Any ideas?
Okay, thanks to markE's reply I was able to achieve what I wanted.
[...] <canvas> </canvas>
<h1 id="myText"> Text </h1> [...]
this is the part of my HTML. The "myText" will be displayed under the canvas based on the size of the window.
To achieve that I added the following code in the CSS.
#myText
{
padding-top: 100vh;
}
You can achieve this with playing with CSS positions;
Try something like this:
<div>
<canvas width="300" height="200" class="custom-canvas" />
<div class="text">
<div class="main">20 %</div>
<div class="head">Completed</div>
</div>
</div>
SCSS:
.custom-canvas{
position: relative;
clear: both;
width: 450px;
height: 200px;
}
.custom-canvas {
.text {
bottom: 13px;
position: absolute;
left: 6px;
right: 0;
text-align: center;
}
.head {
margin-top: 14px;
}
}
Play with left,right,top and bottom to achieve the exact position.
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/
So, I have the same image that I need to overlap each other. The first one as you can see has an z-index:1 and the others of 0. But, as the images keep repeating I have to keep creating a new style to make the next one 115px to the right. Is there a css pseudo method to automate this or do I have to revert to using jquery or js to bump it to the right?
<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>
<div class="span12">
<img src="img/blue_btn.png" alt="Home" class="overlap"/>
<img src="img/blue_btn.png" alt="About" class="underlap"/>
<img src="img/blue_btn.png" alt="Services" class="underlap"/>
<img src="img/blue_btn.png" alt="Portfolio" class="underlap"/>
<img src="img/blue_btn.png" alt="Blog" class="underlap"/>
<img src="img/blue_btn.png" alt="Contact" class="underlap"/>
</div>
UPDATE: I was cropping the image as I read this post as I knew that it would be hard to visualize. Here is the nav area. I have cropped the first one and I will repeat them and later change the alpha with jquery.
http://weslice.com/images/nav_complete.jpg
You should try using float and margins instead of absolute positioning.
http://www.w3schools.com/css/css_float.asp
How about using display : inline-block to get your elements to sit next to each-other, then use margin : -*px to overlap the elements:
.span12 a {
display : inline-block;
margin : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
/*IE 6&7 Compatibility*/
*display : inline;/*only read by IE7*/
zoom : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
_height : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}
Here is a demo: http://jsfiddle.net/WJKS5/2/
Update
To stack the element from left to right instead of right to left:
.span12 a {
float : right;
margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}
Here is a demo: http://jsfiddle.net/WJKS5/4/
I think this fiddle http://jsfiddle.net/2vUzp/9/ achieves the effect without the need for classes (though it does reverse the order of the menu in the html, but not in what is displayed to the average user). After looking at your sample image, you may not want the "hover" effect in my example, but that can be removed.
CSS
.span12 {
float: left;
}
.span12 a {
position: relative;
margin-right: -30px;
display: block;
float: right;
}
.span12 a:first-child {
margin-right: 0;
}
.span12 a:hover {
z-index: 1;
}
.span12 img { /*for demo*/
display: block;
width: 100px;
height: 20px;
border: 1px solid blue;
background-color: cyan;
}
HTML
<div class="span12">
<img src="img/blue_btn.png" alt="Contact"/>
<img src="img/blue_btn.png" alt="Blog"/>
<img src="img/blue_btn.png" alt="Portfolio"/>
<img src="img/blue_btn.png" alt="Services"/>
<img src="img/blue_btn.png" alt="About" />
<img src="img/blue_btn.png" alt="Home" />
</div>
Since you are trying to accomplish an overlap, floating's probably not going to work. I would recommend you use CSS sibling selectors and write rules specifically for 'img', 'img + img', 'img + img + img', etc. that would increase incrementally. I think that should be the only pure CSS way around it. Doing this with JavaScript would be a breeze.