Img class with image bg remove border
I have an img class with a background image and I have a fancy gray border that creates a box. I want to remove the border, but with border: 0px does not solve the problem.
I have provided a violin for replicating my work. Fiddle Here
.facebook {
background: url(http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png);
background-size: 50px 50px;
border: 0px;
width: 50px;
height: 50px;
}
<img class="facebook" alt="Facebook Logo" />
+3
source to share
1 answer
This is the default border that appears when you use an img element with the src attribute set to something that doesn't exist or doesn't have a src. Just use the src attribute:
.facebook {
width: 50px;
height: 50px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.facebook:hover {
opacity: 0.2;
filter: alpha(opacity=20);
}
<img class="facebook" alt="Facebook Logo" src="http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png" />
+3
source to share