Images (HTML & CSS)

Question

I have a query in relation to images, using just html and css (if possible). I would like to have an image (e.g wallpaper image of a city at night) transformed into a circular shape with a surrounding border. Hopefully i would use this image also as a button, and add text to it.

So for example a picture of a football stadium in the middle, circular in shape. Surrounded by a small border. When you click on the image (which will have text on it) you are transferred elsewhere...I will have 4 of these in a line on my poage.

Thanks

All help in this matter would be greatly appreciated

Answer 1

See this demo

HTML:

<a href="#" class="round">
    Click Me!
</a>
<a href="#" class="round">
    Click Me!
</a>
<a href="#" class="round">
    Click Me!
</a>

CSS:

.round{
    display:table-cell;
    width:100px;
    height:100px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid #cc0000;
    background:url("http://www.placehold.it/100x100");
    vertical-align:middle;
    text-align:center;
}

Answer 2

<div class="circular"><a></a></div>

.circular {
    border: solid 1px
    width: 300px; //edit this
    height: 300px; //edit this
    border-radius: 150px; // a half of width and height will cause a circle
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    }

Answer 3

Just answering your position question, check the answer here https://stackoverflow.com/a/19461564/2012904

The flexbox is a good method.

Answer 4

Using the css property border-radius you can round the edges of an element. If you use border-radius: 50% you will end up with a circular image.

So, if you had the following HTML:

<img src="some.url" class="circle">

and the following css:

.circle{ border-radius: 50%;}

You will end up with a rounded image. In order to have a circular image, the dimensions of the element that border-radius is being applied to must be square. So, you will need to set a height and width property in the css as well.

.circle{ 
         border-radius: 50%;
         height: 150px;
         width: 150px;
       }

You should be aware if you are not using a square image and are applying the dimensions directly to the image, you could end up stretching or smushing the image.

To add the border to the image, you need to include the border property in your css:

.circle{ 
         border-radius: 50%;
         height: 150px;
         width: 150px;
         border: red solid 2px;
       }

Alternatively, you could just create a button element and add the image as a background image to that element like this:

//html
<button class="circle"></button>

//css
.circle{
    background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    border: red solid 2px;
    height: 150px;
    width: 150px;
}

This will create a button element with a background image from the url specified. The background-size property will ensure that the image is always large enough to cover the button. The background-position will center the background image inside the button so that the portion of the image that is shown on the button will be from the center of the background image.

This might be a better option for you since you can change the background-position property to position a background image and keep the focus of that image in the center of the new circular element you have created.

In order to use the round image as a button you have a few ways you can go. The best would be to use pure javascript or use jQuery to select the rounded element and add a click event handler.

You could also wrap the rounded element in an <a> element and simply turn the rounded element into a link. Like this:

<a href="#"><button class="circle"></button></a>

In this case, you could remove the button if you wanted:

<a href="#" class="circle"></a>

However, make sure you then add display: block; to your css for the .circle class:

.circle{
    display: block;
    background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
    background-size: cover;
    background-position: center center;
    border-radius:50%;
    width: 150px;
    height: 150px;
    border: red solid 2px;
}