I am trying to achieve a simple rollover using image sprite. Unfortunately i am having trouble in setting the image in the center.
the a class should be a 26px width and 21px in height. but facebook holder should have 10px padding. It would be great if someone can look at my codes?
HTML
<div class="holder">
<div class="facebook-holder">
<a class="ss facebook" href="https://www.facebook.com/bendaggersdotcom" target="_blank"></a>
</div>
</div>
CSS
.holder{background:#a8a1a2; height: 50px; width:150px; padding:10px;}
.ss {display:block;height:21px;width:26px;background: url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png);margin-left:24px;float:left;
}
.facebook-holder { background:#FFF; max-width:46px; max-height:41px; height:100%;vertical-align:baseline; text-align:center;}
.facebook-holder:hover {background:#3b5998;}
.facebook {width:26px;background-position: 0px center; background-repeat: no-repeat; margin:0px; padding:10px;}
.facebook:hover {background-position:-26px; padding:10px;}
See it in action:
http://jsfiddle.net/bendaggers/qQFVV/
What im trying to replicate:
http://readwrite.com/2013/08/29/it-has-been-a-bad-summer-for-apples-ios-7#_tid=popular-feed&_tact=click+%3A+A&_tval=2&_tlbl=Position%3A+2
(notice the share buttons at the right side of your screens? yeah, that's right!)
By the way, feel free to modify everything if that would make it easier for you.
Thank you very much!
You are trying to change too many properties on hover.
The properties for the not-hovered state need to be
display:block;
height:21px; width:26px;
border:10px solid #FFF;
background: #FFF url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png) no-repeat;}
and then you only have to change the background colors and the background position for the sprite on hover.
border-color: #3b5998;
background-color: #3b5998;
so the specific styles for the facebook icon would be nothing but
.facebook {
background-position: 0 center; }
.facebook:hover {
background-position: -26px center;}
See updated fiddle: http://jsfiddle.net/qQFVV/1/
Related
I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?
It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE
You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}
I'm new to HTML/CSS and am in the process of learning it in hopes of transferring the knowledge to running an online newspaper that I am the editor of. Currently, I am working on my own website which has an image rollover on it. I have run into the issue where the rollover works perfectly, but I cannot move it left or right or up and down. For each new rollover I add, they will just stack one underneath the other all the way down the page. How do i solve this issue and be able to position the rollover around the page as if it were a normal picture. Below it the code. Thanks in advance.
if you notice any other discrepancies that i need to fix, I would gladly appreciate it.
the body
<div id="Chasity">
<img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" />
and css
body {
{block:IfNotDarkLayout}
width:100%;
height:100%;
color: #333;
color: rgba(0,0,0,.9);
{/block:IfNotDarkLayout}
{block:IfDarkLayout}
color: #fcfcfc;
color: rgba(255,255,255,.9);
{/block:IfDarkLayout}
background: {color:Content Background};
font-family: "Century Schoolbook", Century, Georgia, serif;
text-shadow: 0 0 1px {color:Content Background};
}
.Chasity{
left:300px;
top:400px;
position:fixed;
padding-top:10px;
padding-right:50px;
{CustomCSS}
simply use the div:hover selector to change the image and then you can move it wherever you want, see my example here
html:
<a href="http://google.com">
<div class="box"></div>
</a>
css:
a{
display:block;
padding:0;
width:200px;
height:500px;
margin:auto;
}
.box{
background:url('http://placekitten.com/200/500');
display:block;
height: 100%;
width:100%;
margin:auto;
}
.box:hover{
background:url('http://placekitten.com/200/501');
}
http://jsfiddle.net/KLxUy/
I have following code to display the image in button using CSS, but I am unable to get it working. The image is in the same directory where the CSS file is.
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background:url(submit-button.gif) no-repeat 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit-go:hover {
background-position:0 -26px;
}
<div align="center"><button type="submit" id="submit-go" >Submit</button></div>
It may be because background is still overriding background-position. Try changing background to this:
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background-image:url(submit-button.gif);
background-repeat: no-repeat;
background-position: 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
I created this fiddle with your code http://jsfiddle.net/rDvTe/1/ and think it works properly tested in Chrome).
I replaced the image link with a URL so it would work, and also added
#submit-go {border: 1px solid red;}
to better see the button.
Am I right if I suppose you wanted the background-image to show up on hover? Else just switch the background-position in normal and hover state.
Hope this is what you were looking for.
For my navigation bar, I have several buttons. When hovering over a button, I want the background image to change and I want the font color to change. The background image is changing fine but I can't get the font color to change. I included both .but1 and .but2 to give an idea of what each of the buttons look like but so far I've only edited .but1 for the hover text.
Any help would be appreciated. Thanks!
CSS:
#buttons {
width:665px;
background:url(images/bg_but.jpg) left top no-repeat;
text-align:center;
height:46px;
margin-left:450px;
}
#buttons a {
font-family:OVerlock, cursive;
font-size:20px;
display:block;
float:left;
height:34px;
text-decoration:none;
color:#303030;
padding-top:12px;
padding-left:0;
text-align:center;
}
.but1 {
background:url(images/but1-4.png) left top no-repeat;
width:134px;
}
.but1:hover {
color:#FFF;
background:url(images/but11.png) left top no-repeat;
}
.but2 {
background:url(images/but2.png) left top no-repeat;
width:132px;
}
.but2:hover {
background:url(images/but22.png) left top no-repeat;
}
HTML
<div id="buttons">
Home
Projects
Paintings
About
Contact
</div>
The selector #buttons a is more specific than .but1:hover, so it will take precedence.
Change it to #buttons .but1:hover and it will be more specific.
simply add your important into .but1:hover like the code below
.but1:hover {
color:#FFF !important;
background:url(images/but11.png) left top no-repeat;
}
So on my website I have css role over buttons, and everything displays as it should in Chrom but in IE and Firefox the height is larger so you can see too much of the image.
Here's the website its happening on http://www.dillonbrannick.com/ I'm just focusing on one of the buttons, but it is happening with all 4 of them.
Here's the code that effects the home button.
Inside the body and nav tags
<nav class="body">
<div class="links nav" id="home-nav">
<a href="#"
onclick=" toggle_visibility_1('illustrations'); toggle_visibility_1('illustration-sub'); toggle_visibility_1('painting-sub'); toggle_visibility_1('paintings'); toggle_visibility_1('animation'); toggle_visibility_1('contact'); toggle_visibility_1('box'); toggle_visibility_2('homeimage'); toggle_visibility_2('homebio'); toggle_visibility_2('facebook'); toggle_visibility_2('google');">
</a>
</div>
</nav>
I'd imagine the Javascript doesn't effect it as all it does is diplay on/off elements so it has nothing to do with dimensions.
here's the css:
.body{
position:absolute;
left:50%;
top:50%;
}
nav{
margin: -125px 0 0 -44.5px;
}
.nav{
position:absolute;
width: 89px;
}
.nav a{
height: 107.5px;
}
.links a{
display: block;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#home-nav {
margin: -60px 0px 0px -140px;
}
#home-nav a{
background: url('http://dl.dropbox.com/u/70582811/home.link.png') no-repeat left top;
}
#home-nav a:hover{
background-position: left -107.5px;
}
I know the body class probably doesn't make any difference to the problem, but I just wanted to show everything that effects the button.
As you can see in these two images(left:Chrome, right: IE and Firefox). There is blue appearing just underneath the grey bar that shouldn't be there, that is part of the other half of the image that is then shifted up onrollover. As you can see on my website.
Thanks in advance,
Dillon Brannick.
I think your problem is the use of .5
.nav a{
height: 107.5px;
}
Browsers probably handle that differently. I don't think there exists something like half a pixel.
Edit : just try 107px, and then 108px. I think one of them should give u the desired result. 107px probably. Firefox takes 107.5px as 108px.