Select A State

Styling Images with CSS

To use these classes, you would place the CSS coding in your css file. Apply the class to the image as shown below.

Float Left

Float an image to the left without a border:

<img alt="" src="images/family.jpg" class="img-left">

Float Right

Float an image to the right without a border:

<img alt="" src="images/family.jpg" class="img-right">

Float an image to the left with a border:

<img alt="" class="img-left img-border" src="images/family.jpg">

Float an image to the right with a border:

<img alt="" class="img-right img-border" src="images/family.jpg">

Float an image to the left with a border and a shadow:

<img alt="" class="img-catalog img-left" src="images/family.jpg">

Float an image to the right with a border and a shadow:

<img alt="" class="img-catalog img-right" src="images/family.jpg">

Make a square image appear to be round/oval and float it to the left. [looks square in Design view]

<img alt="" class="img-round-left"  src="images/family.jpg">

Make a square image appear to be round/oval and float it to the right. [looks square in Design view]

<img alt="" class="img-round-right"  src="images/family.jpg">

Float an image to the left and add a frame to it:

<img alt="" class="img-frame img-left" src="images/family.jpg" >

Float an image to the right and add a frame to it:

<img alt="" class="img-frame img-right" src="images/family.jpg" >

Float an image to the left and curve the corners.

<img alt="" class="img-curved img-left" src="images/family.jpg">

Float an image to the right and curve the corners.

<img alt="" class="img-curved img-right" src="images/wofamily.jpg">

Float an image to the left and add padding and a light border.

<img alt="" class="img-gallery img-left" src="images/family.jpg">

Float an image to the right and add padding and a light border.

<img alt="" class="img-gallery img-right" src="images/wofamily.jpg">

Float an image to the left and tilt it to the left.

<img alt="" class="img-rotate-left img-left img-frame" src="images/family.jpg">

Float an image to the right and tilt it to the right.

<img alt="" class="img-rotate-right img-right img-frame" src="images/family.jpg">

What about "Centering" an image?

You cannot just center an image by putting a "center" class on the image. You have to center the image in a paragraph. Your code would look like this: <p class="center"><src="images/family.jpg"></p>

CSS coding for the image styles above

img {border: none; max-width: 100%; box-sizing: border-box;} always use this in your css
.img-border {margin: 5px 10px 0 0; border: 1px #777 solid;}
.img-catalog {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);}
.img-frame {background: #ffffff; border: 1px #aaa solid; padding: 3px; margin: 4px 1px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.img-curved {border-radius: 10px; margin: 4px 2px; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-gallery {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%;}
.img-shadow {margin: 5px 0; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-round {border-radius: 50%; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-round-left {border-radius: 50%; float: left; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5); margin-right: 10px;}
.img-round-right {border-radius: 50%; float: right; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5); margin-left: 10px;}
.img-small {max-width: 150px; height: auto;}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-right-shadow {margin: 5px 0 0 10px; float: right; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-rotate-right {margin: 20px; transform: rotate(4deg);}.img-right-border {margin: 5px 0 0 10px; float: right; border: 1px #777 solid;}
.img-rotate-left {margin: 20px; transform: rotate(-4deg);}
.img-left {margin: 5px 10px 0 0; float: left;}
.img-left-shadow {margin: 5px 10px 0 0; float: left; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-fullwidth {width: 100% !important;}

Remember that you can add numerous classes to the images. This option gives you the ability to customized how your images look!

Submitted by Marsha Bryant


Quick Links
Contact Us

The USGenWeb Project, Free Genealogy OnlineComments and administrative-type problems should be emailed to the National Coordinator. For suggestons, concerns or complaints regarding a specific web site within the USGenWeb Project, please use the Contact Form.

Direct comments, technical difficulties or suggestions about this web site to the Webmaster.