Develop Reference

How to add low-key (black, transparent overlay) effect to image using CSS?

I am trying to make an image looks like it is kind of transparent? I don't really know how to describe it but it is like you can write texts on it and the image is in the back.
is this doable with css or javascript or any other language?

I think what you need is a css filter.
For the very latest browsers check out these examples which use:
img {
-webkit-filter: brightness(20%);
filter:brightness(20%);
}
For older browsers check out these examples which use:
img {
opacity: 0.3;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

You can add a mask over the image like the one below:
html:
<div>
<img scr="yourImage.jpg" alt="" />
<div class="mask"></div>
</div>
css:
.mask{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}

Mass Resizing of Elements on Page

I want to add a side menu that pops out and takes up 30% of the screen's width. I would also like for all of the elements currently on the page to stay positioned correctly, but be scaled down automatically to accommodate for the screen real estate loss (let's say everything is sized using viewport width, i.e. vw).
How could I go about mass-resizing every element on the page -- or even just build an array of ones to target -- via jQuery? (If jQuery is not ideal for performance, I'd be interested in another approach, especially CSS.)
Not seeking an in-depth example. Just one with text and images (<h1>, <p>, and <img>).
Edit for clarity: How would I go about mass-capturing the size of every element on a page and then reducing all of them simultaneously by 30%? I am curious whether or not anyone has had success with something like this and what the performance ramifications are. I obviously expect it to be bad, but on light pages (i.e. landing sites) it might be tolerable. I am interested in seeing someone else's code and running it through its paces on jsperf, etc.

I think that by far the easiest way to do that is using a transform; scale(0.7) on some kind of container. All the children of the container will be scaled automatically.
.container {
position: absolute;
left: 30%;
top: 0px;
background-color: lightblue;
transform: scale(0.7);
transform-origin: top left;
}
.sidebar {
width: 30%;
background-color: yellow;
}
<div class="container">
<p>TEST 1</p>
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="sidebar">SIDEBAR
</div>
All you need to do in jQuery is to assign the container class

This is suuuuper quick and dirty:
$('h1, p, img').each(function(){
$(this).width($(this).width() * .7);
$(this).height($(this).height() * .7);
$(this).css('font-size', '70%');
});
The jQuery selector can include whatever element types you want, of course. I included the font-size bit because the <p> tags that I used otherwise stayed pretty much the same! You can also do this:
$('*').each(function(){
$(this).width($(this).width() * .7);
$(this).height($(this).height() * .7);
$(this).css('font-size', '70%');
});
...but it makes the font suuuuper teensy. OTOH, leaving the font-size line out means that as before, it doesn't actually change at all.
But maybe that's enough to give you a start!

Changing image on hover

I need a menu consisting of images and the images should change when someone hover around it.
HTML
<div id="menu" >
<img src="images/about.png" alt="logo" />
</div>
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks

As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}

Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)

Place this code just before the closing body tag,
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the img tag. Done. Works perfectly.

This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<img src="lPr4m.png" alt="logo" />
</div>
</body>
</html>
(Image names changed for my convenience making the page.)

Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img tag is on top, and it always will be.
HTML
<div id="menu" >
Home
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}

you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above

You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.

you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.

are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
<div id="nav-home"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;">
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.

And now for the simple way:
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.

DIV with text over an image on hover

OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..

Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}

#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.

If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>

I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.

How do I remove the gray border that surrounds background images?

I've come across an interesting problem in the following line of code:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?
Thanks.
Mike

So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.
I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.
If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?

You can also add a blank image as a place holder:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
This should do the trick!

Actually, this seems to work at least on Chrome:
img {
content: "";
}

The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip

try <img border="0" />
That should do the trick.
EDIT
Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...
instead of a imagetag use a
<div style="background-image: url(Resources/bar.png);"></div>
or if it is a image you want in that area use a
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

img tags need a src attribute.
e.g.,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:
<div style="background-image:url(Resources/bar.png);">...</div>

Tried setting the border to 0px?
EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.
<div class="myDivClass">content to go on TOP of the background image</div>
CSS:
.myDiVClass
{
background: url(Resources/bar.png) no-repeat;
width: 300px;
height: 50px;
}
or
<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>
It's best to keep CSS seperate as it otherwise defeats part of the point though.

I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.
<img id="myImage">
My fix was to update the initial image tag CSS to
#myImage {
display:none;
}
And then used a JQuery to show it once its content was loaded.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

Try setting this instead of background-image:
background: url(Resources/bar.png) no-repeat;

if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET
The correct way it would be to separate the css from code and to have a CSS class for the image.
<img src='whatever.png' alt='whatever' class='className' />
and in the css to define what className looks like.
,className {border:0;}

I know this is an old question but I found this useful..
In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.
<img src="transparent.png" style="background: url(sprite.png) x y" />
Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp
Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.

Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:
{-webkit-box-shadow:none;}
Hope it works for you too.

add an empty src="" to your image component if your using as a background-image in css the square will disappear
<image class=${styles.moneyIcon} src="" ></image>