I'm trying to use a CSS sprite on some anchor tags. However, when I load my page, what should be the "initial" icon doesn't show up!! Any ideas? I double checked my image paths and they are indeed correct. I'm not sure if my coordinates for the background position are 100% correct, but I figured I can tweak those once I actually get the icon to show up! Thanks!
HTML:
<div id="social">
</div>
CSS:
#social a.button{
width:150px;
height:150px;
display:block;
background-image:url('images/icons/behancesprite.png');
background-repeat:no-repeat;
background-position:0 0;
}
#social a.button:hover{
background-position: 0 -266px;
}
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:
border:none;
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;
Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.
jsFiddle: jsFiddle
The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.
However, that is only the issue, try using something like:
<div class="image-div>
<img src="src_to_file.png" alt="photo" />
<button class="button">Button</button>
</div>
You can use this as the css:
.image-div {
position: relative;
}
.button {
position: absolute;
}
Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
But I am struggling.
Code I have for css is:
#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}
So I thought ...
#gallery img:hover {
width:700px;
height:213px;
position: relative;
z-index:10000;
background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}
Would work, but it doesnt.
The image I am transparently overlaying on hover is:
What am I doing wrong.
I think I may have a corrupt css tag somewhere.
Any help appreciated.
Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.
Or you could not overlay the image and just swap the original image for the combined image?
Hello there
I think you misunderstood the mechanics of CSS:
The image itself is an object and the background specified goes behind it.
So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs.
A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.
Fixed.
css:
#container { position:relative; width:700px; height:213px;}
.image { position:absolute; width:700px; height:213px; z-index:0;}
.overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
.overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}
html:
<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>
I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the CSS
.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;
}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;
}
This is the html
<div class="menu_header">Some Header</div>
<div class="menu_main">
<ul>
<li>Educational Objective</li>
<li>Projects</li>
<li>Class Preparation</li>
<li>Testimonials</li>
</ul>
</div>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
You could move it like you were doing with absolute positioning and move the background down like so:
background:url(someimage.png) repeat-y left 50px;
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
You could style your UL specifically:
.nav
{
position: relative;
top: -50px;
}
and
<ul class="nav">
...
Or perhaps put the UL in another DIV class="nav".
But you can move the background down (for example by 5 pixels):
background-position: top 5px;