I'm building a portfolio site for a friend. One of the features includes an image change on hover.
I am trying to achieve this by:
Creating a div with background image
Layering another image over the top of it.
#b1 {
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
#b1.img {
opacity:1;
position:absolute;
left:0;
}
#b1 img:hover {
opacity:0;
}
<div id="b1">
<img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">
</div>
However, I cannot get the background image to appear and have tried numerous steps to troubleshoot where I'm going wrong.
The JSFiddle with my code appears to be working, but I cannot reproduce it successfully on my localhost.
You need to set CSS rules for width and height of your div that contains background image.
Example:
#b1 {
width:500px; //set your own value
height:500px; //set your own value
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
I think it has something to do with the #b1.img selector. When I change that to #b1 img as I think it should be, I don't get the background image repeating across the page and I'm able to reproduce the issue of not seeing it on hover. Then I add height: 480px; width: 359px; to the #b1 tag and it works. Does that change fix it for you?
If not, try using this method instead of changing the opacity: https://stackoverflow.com/a/18813323/4285369
Related
I have a code which works fine in Google Chrome but not working in Firefox and IE.
<asp:Image ID="Image1" runat="server" CssClass="image" />
Css Code :
.image{
width:50px;
height:50px;
content:url('Image.png');
}
.image:hover{
width:50px;
height:50px;
content:url('Image_Hover.png');
}
CSS:
.my-img{
width:100px;
height:100px;
background-image: url('Image.png');
}
.my-img:hover {
background-image: url('Image_Hover.png');
}
HTML:
<div class="my-img"></div>
Try this.
Different people here on SO were addressing the same issue. One solution was changing content (...) to background-image. In your case it would be: background-image: url('Image.png'); (or with the hover picture)
Check this post for more detail about that.
Stuart Kershaw gave an explanation for that behavior in one of the comments:
I don't know why it works in Chrome, but the explanation for this is that you can't use the content attribute with the :hover selector. content is meant for :before/:after pseudo elements. –
Edit: Full example of your code, changed according to the information from the linked post:
.image {
height: 50px;
width: 50px;
display: block;
background-image: url('Image.png');
}
.image:hover {
background-image: url('Image_Hover.png');
}
Edit 2: If both images are of the same size, and you are decreasing their size with CSS every time to 50x50, you could just scale the image size to 50x50 and use the smaller images, so that you don't have to do it every time with CSS. I prefer using GIMP for that, but I bet there are many free online tools, which resize your image to the desired size.
There you haven't specify any floating position for the image. try float:left it will work
Im trying to get a transition working so that the bg colour fades into another colour depending on position of page/i.e. triggered by divs with same class.
Found some js here (http://codepen.io/Funsella/pen/yLfAG) which works exactly how I want on desktop, but it breaks on iPad (no matter the browser).
Would anybody know how to do this transition with CSS?
I found but it's triggered by a hover..
For example..
http://jsfiddle.net/L9JXG/1/
.div1 {
height:200px;
width:600px;
position:relative;
background:red;
}
.div1:after {
position:absolute;
width:100%;
height:100%;
content:'';
background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
background-size:cover;
opacity:1;
transition: 3s;
}
.div1:hover:after {
opacity:0;
}
You have to set suitable break points. Here is a great resource for the question.
A stand alone script to Change Page Background on User Scroll
Demo
This is the download link for the script http://download.techstream.org/Change-Page-Background-on-Scroll.zip (Download will start when you click on it)
Sorry for my bad english first. Hope anybody can help anyway.
I try to achieve the following: Inside a page i have an image. Since it is in Wordpress a non-pro can edit it. I want on mouse-over an image to scale the content of the image inside the box. (so the image itself should not change its size.) i.e. I have an image of 200 x 200 px. On mouse over i want it to still have this size, but the content inside should zoom. Image size can be different. So i never know exakt measures.
It has to be done on the img-tag i think. No chance to put a div or anything around it. Anybody knows the solution?
Edit: So - i want the image on hover be larger, but be cropped to the size of the non-hover status.
Thank you!
Mike
Add the following styling to the .box.
overflow: hidden;
It sounds like you need a transform:scale
HTML
<div class="box">
<img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/>
</div>
CSS
.box {
width:250px;
height:250px;
padding:10px;
margin: 25px;
border:1px solid grey;;
}
img {
display: block;
transition:all 0.25s ease;
}
.box:hover img {
-webkit-transform:scale(1.25)
}
JSfiddle Demo
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)
I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
Any help? This method is bad so if anyone has a better one please comment.
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
The image flickers because you can't hover over something that isn't there.
It will work if you have it layered normally (no z-index necessary) and make it transparent, so that it is still being displayed and can be hovered over.
The second image won't flicker, and you can control the styling with the span tag. Here's some of the CSS I used:
img.side
{position:absolute;
border:1px solid black;
padding:5px 5px 5px 5px;
float:center;}
/*normal base images*/
img:hover+span
{display:block;}
/*new images. automatically display beneath base/hover image*/
.side:hover
{opacity:0;}
/*base images again, only when hovered over*/
span
{display:none;
cursor:pointer;}
The hover tag determines the styling of the base img (and base div), and hover+span defines the styling of the img that only appears when hovering.
Here is the html showing the div entirely:
<div class="only" id="one">
<img class="side" id="ach" src="ach.svg">Academic</a>
<span>
<img class="hovering" id="hach" src="Hach.svg">Academic</a>
</span>
</div>
Hope this helps.