Removing circle in CSS on hover

Question

I'm trying to remove a circle that's made in CSS but when I remove a few lines using the same class it makes the magnifying glass on it bigger but I want it to stay the same size.

URL to the site: http://goo.gl/S0yQQ5 You can see the circle by hovering over a image.

The classes: mask, mask_circle

CSS: http://pastebin.com/szdyQRp9

Thanks!

Answer 1

Add this to your stylesheet:

 
 
 
  
  .mask_circle { display: none; }
 
  

[EDIT based on comments]

If you want to keep the magnifying glass, but as a rectangle (not a circle), do this:

.one_fourth.gallery4:hover .mask .mask_circle {
    border-radius: 200px; /* delete this line */

Please note that there is also .one_half , .one_third styles in your stylesheet which give the .mask_circle inside those specific classes an rounded border. You'll need to change them all, if you use those styles too. Or you could do it the quick and dirty(!!) way:

.mask_circle {
    border-radius: 0 !important;
}