I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)
Related
There are few questions here that ask the same but their solutions don't work for me.
This is a picture from one of those questions and what I want to achieve. I have a list and when there are more items, scrollbar shows up.
I also set the overflow-y to be overlay since I don't want the scrollbar to add to the width of the list. How can I make the track transparent so the items underneath can be seen?
Track overlapping content
[Updated]:
Fiddle to show how it looks now, the picture is what I want to get.
p {
overflow-y: overlay;
width: 101%; }
https://jsfiddle.net/yk1cverh/2/
You can add the following in your css code:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
height:30px;
}
body::-webkit-scrollbar-track-piece
{
display:none;
}
In this part:
body::-webkit-scrollbar {
width: 0.7em;
background: white;
}
You can change the background: white; to any color you want. You probably need to make it similar to your body's background color or set it to transparent.
Here is a JS Fiddle that demonstrates it.
https://jsfiddle.net/qzsbf0tm/687/
I'm using CSS and attempting to get what looks like a bullet point in the headings:
This is the exact image I want.
What I've done :
h1,h2,h3 {
background-image: url("the image link goes here");
}
anyone get any ideas I've tried moving it and stuff but it just isn't happening. Cheers.
You should set the background-position as well and also a left padding for the heading elements to push the text to the right:
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
Note that I used the background property as a shorthand.
You can also achieve that by using ::before pseudo-element to create the rectangle and position that within the headings as follows:
h1:before,
h2:before,
h3:before {
content: '■ ';
position: relative;
bottom: .1em;
color: #666;
}
WORKING DEMO
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
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.
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}