Hover on mouse over rather than show transition on mouse out

Question

I am trying to make the images on my webpage show a different colour when I hover over them. Instead what is happening is that the images have this transparent colour and its showing the original picture when I hover over them.

Please can someone help with this:

.service-style-1 .service-perview figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -khtml-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -khtml-transition: all 0.2s linear;
  transition: all 0.2s linear;
  top: 0;
  right: 0;
  z-index: 1;
  border: 104px solid rgba(255, 109, 132, 0.5);
}

.service-style-1:hover .service-perview figcaption {
  border-width: 8px;
}

html:

<div class="row">
  <div class="carousel-services carousel-col-3 carousel">
    <div class="service-wrapper carousel-item">
      <div class="service service-style-1">
        <h3 class="service-title"><a href="single-product.html">Product</a></h3>
        <figure class="service-perview">
          <img src="images1.jpg" alt="Cakes">
          <figcaption></figcaption>
        </figure>
        <p class="service-description">Product1</p>
      </div>
      <!-- end of service -->
    </div>
    <!-- end of service wrappper -->
  </div>
</div>

Answer 1

我通过将边框设置为8px并将其悬停在104px处来解决此问题