issue with css positioning in wordpress columns

I am having an issue with positioning a caption on top of a picture. The pictures are in a column, there are 4 columns. The first 3 columns seem to work fine but then when it comes to the last column, it does not look right at all and I feel like it may have to do with wordpress css? I have tried to add css to the last column which positions it correctly but then the width is not right… I am so confused. This may be such a simple fix but I can’t seem to figure it out

Here is the link to the website

Here is my html code


<a href="#" class="caption">
<img class="hover" alt="Services" src="" />
<span class="caption">Services</span></a>



<a href="#" class="caption">
<img class="hover" alt="Keep Healthy" src="" />
<span class="caption">Keep Healthy</span></a>



<a href="#" class="caption">
<img class="hover" alt="Meet The Staff" src="" />
<span class="caption">Meet The Staff</span></a>



<a href="#" class="caption">
<img class="hover" alt="Portal" src="" />
<span class="caption">Portal</span></a>

Here is my css

a:hover img.hover{
  opacity: 0.5;
  filter: alpha(opacity=530);
  color: #fff !important;
  position: absolute;
  bottom: 0;
  left: 2%;
  padding: 1.9%;
  width: 93%;
  background-color: rgba(0,0,0,0.5);
.last span.caption{
  bottom: 22px;
  left: 3px;

Any help is appreciated. Thank you in advance!!

Read more here: issue with css positioning in wordpress columns

Leave a Reply

Your email address will not be published. Required fields are marked *