html - Hover on mouse over rather than show transition on mouse out -
i trying make images on webpage show different colour when hover on them. instead happening images have transparent colour , showing original picture when hover on them.
please can 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: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; -ms-transition: 0.2s linear; -khtml-transition: 0.2s linear; transition: 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>
i've fixed making border 8px , on hover making 104px
Comments
Post a Comment