I am attempting to center an image within each of the four divs below. I have experimented with using the image as a background, but due to the border radius, it does not appear quite right. To provide context, I have included a fiddle. HTML:
<div id="gold" class="divSquare">1</div>
<div id="lblue" class="divSquare">2</div>
<div style='clear:both'></div>
<div id="redb" class="divSquare">3</div>
<div id="dblue" class="divSquare">4</div>
CSS:
#gold{
background-color:#F3B500;
border-radius: 100px 100px 5px 100px;
transition: all .2s ease-in-out; }
#gold:hover{
opacity: 0.8;
transform: scale(1.2);
border:none;
margin:8px;
}
#lblue{
background-color:#0E43C6;
transition: all .2s ease-in-out;
border-radius: 100px 100px 100px 5px; }
#lblue:hover{
opacity: 0.8;
transform: scale(1.2);
margin:8px;}
#redb{
background-color:#7E0202;
transition: all .2s ease-in-out;
border-radius: 100px 5px 100px 100px;
}
#redb:hover{
opacity: 0.5;
transform: scale(1.2);
margin:8px;}
#dblue{
background-color:#041871;
transition: all .2s ease-in-out;
border-radius: 5px 100px 100px 100px;
}
#dblue:hover{
opacity: 0.5;
transform: scale(1.2);
margin:8px;}
.divSquare{
width:100px; height:100px; margin:2px;float:left;
text-align: center;
vertical-align: middle;
line-height: 150px;}