I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
Related
Hy guys. I have this problem. So I have an image. In front of that image is simple element with width and height. I want to blur that element so it looks like that part of the picture is blurred. I cannot have any image or background-image in that element. I want to achieve this effect without using any additional image, just css. I tried to put background colour, reducing the opacity and putting filter: blur but it doesn’t look good. I can still read the text that is supposed to be blurred.
It's not possible to do this with full support without javascript, at the moment. But in case you want to support a limited set of browsers, you can use backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such
as blurring or color shifting to the area behind an element. Because
it applies to everything behind the element, to see the effect you
must make the element or its background at least partially
transparent.
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
Basically, I am using Iframes on my website, and I have a 200px bar on the left which I am using for navigation. There are several links here, of which when I hover over them the text and background colors invert (so you can see it, basically).
What I want is that so the background color will span the whole of the navigation frame - currently, it is only a small square around the box. I want it to look like this at any resolution and so far... my attempts have been useless.
I am using HTML and CSS, and would preferably like a solution using those languages.
Thank you for your help.
I'm fairly sure this can't be done without the use of JavaScript. Consider the code at
http://jsfiddle.net/ZPzBL/
the a:hover only allows the style of the link to be changed.
If you want the whole div to change colour (which, if I've read your question correctly, is what you want), then using purely html, you'd need to have a style with .wrapper:hover, such as this:
http://jsfiddle.net/ZPzBL/1/,
but this means that the whole div changes colour as soon as you hover over it.
Essentially, CSS only lets you change the style of the element being hovered over at that time. Any other changes to the DOM need to be handled by JavaScript. You'll probably want to have a look at http://api.jquery.com/hover/
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
I have a link that will consist on of 1 image and nothing else. I also need this image to highlight when user hovers over it. I was thinking: use <a> tag and set its height, width and background-image properties in CSS. However, (and I've had a feeling it might do that) the <a> tag's size when rendered in browser is 0x0. I can include a couple of characters between the link tag (and the image shows up ok) but it feels a bit hacky. I was also thinking to use the old trick of 1px transparent image set to the correct size - but this also seems less than correct way of doing it. I also can do the same thing with jQuery (but this seems like trying to kill a fly with a sledge hammer).
Is there an alternative pure CSS/HTML way of achieving this?
Set it to display:block;, by default a tags are set to display inline. You can then set width and height.
By changing the background-position on hover, or changing the background-image, you can do the rollover.
And for the background image, you should use a sprite map. This means make one large image that consists of each image you want to display and only showing part of it as the background. This is really good to do because it pre-loads the hovered image so there is no lag for the user. I also find that it organizes my image directories a bit (instead of having an on/off image for every button I just have one image)