How to “crop” a rectangular image into a square with CSS without using an image tag

For this to be possible several steps will be needed to get the result needed.This will also require HTML which would be used to link the CSS to perform the required styling needed, to do this. BELOW is a demo of the problem above:

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

The next DEMO is if the image links to another place

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

thumb1 a:hover { YOUR HOVER STYLES HERE }