I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<img src="item.png" style="border:0; " />
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png
Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
It'd be easier to debug if you gave us a screenshot and some code. But it sounds like you might just need to position the background image within the element using background-position. You can use pixels, percentages or just top,bottom,left,right to place a background image wherever you want it within an element. http://www.w3schools.com/css/pr_background-position.asp. You might also want to look into image sprites for rollover effects. You would place the original and rollover images onto one file and simple change the background-position on hover.
Related
OK, this is a weird one. I have two divs inside a container div:
<div class="ri-full-width-container">
<div id="map"></div>
<div class="ri-limited-width-container">
</div>
D3 is creating a GeoJSON map in the #map div. The other div sits on top of that background map. What's odd is that that overlay div's content (text and buttons) appear over the map, as expected. BUT the background color of the overlay is visible, but it's BEHIND the svg elements of the map.
I know that SVG renders based on when it's added to the DOM, but since they're in a div that appears earlier in the DOM and, more importantly, the rest of that overlay div is on top of the SVG just fine, can anyone explain why the background color is behind the svg elements?
Live code:
https://beehivemedia.com/dataviz/map_oddity/test_file.html
Screenshot of what I'm talking about:
This is a css issue,
from an answer here:
The issue here doesn't just apply to SVGs. It's to do with element positioning. Any positioned elements (position:absolute, position:relative) are displayed in front of any non-positioned elements.
Your .ri-limited-width-container has no positioning, so its background appears behind the positioned #map div while its child .ri-menu is positioned so it appears as intended.
Changing the .ri-limited-width-container positioning to relative should get you something like:
I'm setting up a portfolio webpage, and I want the images to be coloured with a colour from the logo 50% solid until mouseover, which makes the colour fade out and reveal the image properly.
Here's the site so far; www.cmvisual.com
Anybody know how to do this?
It seems like you probably want to put a div with a background color and partial opacity
over the image, and then use a CSS transition (preferably) or Javascript to animate the transition.
Maybe start at half opacity, then go to 0 opacity on rollover.
What you REALLY want is CSS blend modes, but that isn't fully supported yet.
Wondering if anybody could help me out. I have the Masonry jquery plug-in which is laying out a set of images and when you zoom in or out in the browser, they change place to fit more/less of the images on the screen. Is there a way to, when i hover over these images, they would fade to black and a description of the image would appear in it's place.
A bit like http://www.flickr.com/ but rather than the small box at the bottom when you hover on an image, a box that covers the whole image and each seperate image can have a seperate description.
some possible hover effects is like Image effects, like grayscale, blur, sepia, etc. I still haven't figure out the best hover effect that have fix height/width.
Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/