How to have 2 images alligned next to each other in HTML

Question

The title basically says my problem. I basically want to have 2 images aligned next to eachother, one on the left and one on the right; I would just use <img src> but I want the alignment to be properly done. I have been looking around but I can't seem to find anything related to my search.

Also, if there's a way to make a displayed image in black and white, and when hovered over; it displays the correct image (which is in color) - just to give it an effect?

Also, you mean vertically-aligned, right? Are images same dimensions? — The One and Only ChemistryBlob, May 04 '14 at 12:41
About the grey-scale effect, take a look here: [http://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over](http://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over) — tgogos, May 04 '14 at 12:45

score 0 · Answer 1 · answered May 04 '14 at 12:41

0

About align your 2 images you can try to apply float property at CSS like:

.image {
float:left;
}

answered May 04 '14 at 12:41

Weimin Ye

665
4
15

score 0 · Answer 2 · answered May 04 '14 at 12:58

Fiddle: http://jsfiddle.net/5ajFK/

The <img src> is wrapped in a span and it is positioned absolute. The black and white effects can be implemented using CSS filter which activates when the mouse is placed on the image.

$('img').mouseenter(function(){
    $(this).addClass('desaturate');    
});
$('img').mouseleave(function(){
    $(this).removeClass('desaturate');    
});

The CSS for b&w effect:

img.desaturate { -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

How to have 2 images alligned next to each other in HTML

2 Answers2