In my css I am using different image for hover state button but when I hover over the image, there is no change. Can you help find the fix?
.button {
background-image:url('/images/search.png');
width:73px;
height:23px;
background-repeat:no-repeat;
cursor:pointer;
border:none;
}
.button:hover {
background-image:url('/images/search_active.png');
background-repeat:no-repeat;
cursor:pointer;
border:none;
}
Make sure your image is in './images/search_active.png' and it is a correct path.
Related
in site we have like below text as in link1 :
But instead of text - Black & Green , i want to display images as below or css icons as here....
i uploaded Black & Green images to below path :
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
{
width:50px; height:50px; background:#000; border-radius:50%;
}
You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.
label{
width:50px;
height:50px;
border-radius:50%;
background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
background-size:cover;
display:block;
color:transparent;
}
<label>jdjshjkdhd</label>
if you have no influence on html I can give you a hack :))
label {
color: #fff;
width: 0px;
}
label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
here is codepen http://codepen.io/kejt/pen/EZZGeE
This workaround could help you with your requirements. Change the color of background based on for value.
label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
I've seen a number of questions and answers about changing the background color of the default Twitter Bootstrap Primary Navbar, but they seem to deal with the top-most layer (the navbar-inner class), masking a number of other colors and options underneath.
I'm looking to create a transparent navbar, and after adding "background-color:transparent;" to each layer I can find, I still have a stock white bar across the top of my screen. Currently my app.css has these few lines:
.navbar-inner{
background-color:transparent;
}
.navbar-inner container{
background-color:transparent;
}
.navbar{
background-color:transparent;
}
#nav-main{
background-color:transparent;
}
#banner{
background-color:transparent;
}
I'm running out of guesses here, and my scatter-shot method seems to be failing me. Is there a rule I just haven't seen (and modified) yet, or am I going about this the wrong way altogether?
The problem is they are using an image on the background. So by setting the background-color, you are only setting the color behind the image. Try something along these lines:
.navbar-inner{
background:transparent !important;
}
.navbar-inner container{
background:transparent !important;
}
.navbar{
background:transparent !important;
}
#nav-main{
background:transparent !important;
}
#banner{
background:transparent !important;
}
Got this result in Bootstrap 3 using:
body { background: transparent }
I am designing a website and I would like the search bar to not have rounded corners-just the typical straight corners. For whatever reason I cannot make it work in google chrome, but when I pull up my website in firefox it does have straight corners. Does anyone know what I need to do so the search bar will show up in chrome without rounded corners?
Here is my css:
#searchbar {
float:right;
padding:10px 20px;
clear:right;
margin-right:35px;
margin-top:-7px;
}
#searchbar input {
float:right;
border:1px solid #000;
border-radius:none;
}
#searchbar p {
margin:5px 10px 0 0;
float:right;
text-transform:capitalize;
font-variant:small-caps;
font-size:1em;
}
Try putting this in your css. This will change the default showing of a search to be the same as text-field which has straight corners. http://jsfiddle.net/8PdDt/
input[type=search] {
-webkit-appearance: textfield;
}
I have an image on a page and when I hover the image should show a different color. The hover itself works but the original image is on top of the hover image. I have tried setting z-index but does not work correctly.
Here is the CSS:
#login, #logout {
float:left;
padding: 0px 10px;
margin-left:5px;
margin-top:15px;
z-index:1;
}
#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
Thanks for any help and advice!
May I suggest you use CSS sprites instead. I believe they are a much more efficient method of achieving what you want.
Rather then 're-inventing the wheel' and writing how to do it here have a look at http://sixrevisions.com/css/css-sprites-site-speed/ or just google 'CSS Sprites'.
They decrease HTTP requests and therefore amount of bandwidth your site uses.
Hope that helps. If not, comment and i'll try and come up with a better option.
Cheers,
Matthew
You're better off having the original image and the hover state on the same element. Right now, the original is an image contained within the link tag, so it is on top.
Do this
Remove the image
Add this CSS to #login
background: url("../images/skin/login.png") top left no-repeat;
display: block;
height: 26px;
width: 80px;
It's better to have both images on the same image (a sprite), and just change the background position on hover. This eliminates flashing as the image loads upon first hovering. See the other answer by Matthew about that.
remove the hover css and change the image to this:
<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />
and add this script to your page:
function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
}
If you are like me and don't like using sprites:
I came up with a quick and easy way to have the same effect (image fade to color) the only drawback is you need a transparent PNG, but works great with lots of buttons or social media icons.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
Let me know if you like it.