Hello I have a div with a background image on my website set up so when you hover over it, it changes background images.
It works correctly but the only issue is that there is a slight delay when switching images, probably a 0.2 second delay. So when you hover over it, the div turns blank for 0.2 seconds and then the new image appears.
Does anyone know what is causing this issue? I am thinking it has to do with the speed in which the hover image loads, if that is the case then there probably isn't a solution for this issue and I will just have to live with it.
There is no javascript or jQuery associated with the div at all.
Here is my code.
HTML:
<div class="video-button">
</div>
CSS:
.video-button {
background: url('images/playbutton.png') center center no-repeat;
height: 113px;
width: 113px;
}
.video-button:hover {
background: url('images/playbutton-h.png') center center no-repeat;
}
Load that second image in another div that is out side the screen view (not visible) .
Once that image is loaded browser won't need to call it again, it will use cache to show it on hover.
Related
When I add a background image to a div, the following div scrolls past the image, creating a cool parallax effect.
However, this only works when the background attachment is fixed. But in fixed position I cannot get the background image size to "cover" or "contain" the div without the image disappearing or resizing too large.
The only solution I found was to use repeat, which I don't want to do. I've also played around with background-position but that doesn't seem to work either, the image sometimes disappears or isn't in the same place across browsers
.imgContainer{
height:250px;
border-top-right-radius:inherit;
border-top-left-radius:inherit;
background-repeat:no-repeat;
background-image: url('test.jpg');
background-size: cover;
background-attachment: fixed; /*If I remove this the image fills the div approriately, but the div below it doesn't scroll over it. */
}
HTML
<div class="content">
<div class="imgContainer">
</div> <!--ends imageContainer -->
<div class="contentPosts">
Content goes here and should scroll above the image rather than push it up
</div>
Use a JavaScript library Skrollr.js, you will have a great control of your animations and the timing.
Check our these two tutorials to get you started with Skrollr:
Simple parallax scrolling tutorial
How to create a parallax scrolling website
I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.
There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I've tried to implement the suggestions offered on this thread, but to no avail. Has anyone an idea on how I can make this work without the flicker?
Thank you so much!
Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.
A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.
For example:
/* Image is supposed to have height less than 100px here. */
A {
background: url(example.png) 0 -100px no-repeat;
}
A:hover {
background-position: 0 0;
}
By the way, it's established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:
/* "rollover-sprite.png" file contains images for both states side by side. */
A {
background: url(rollover-sprite.png) no-repeat;
}
/* Width of image for each state is supposed to be 100px here
(sprite will be ~200px wide). */
A:hover {
background-position: -100px 0;
}
You need to preload the image that you are switching to, the "flicker" is the short delay between you hovering and the image actually loading. There are lots of ways to do this, are you using jQuery?
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js