Нужно сделать картинки-ссылки которые становятся цветными при наведении на них и меняет цвет бордер. Проблема в том что бордер смещенный и идет backgraund-ом.
HTML
` .btn-main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.btn-main-content a {
color: #01983b;
text-transform: uppercase;
font-weight: 700;
}
.img-btn img {
position: relative;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
transform: rotate(45deg);
}
.img-btn img:after {
width: 100%;
height: 100%;
border: 5px solid #000;
background: transparent;
transform: rotate(45deg);
position: absolute;
content: "";
}
.img-btn img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none;
border: 5px solid #0079db;
}
.img-btn a:hover {
color: #0079db;
}
<div class="btn-main-content">
<div class="img-btn">
<a href="#"><img src="img/ic_btn-1.png" alt="Виды работ">балконы и лоджии</a>
</div>
<div class="img-btn">
<a href="#"><img src="img/ic_btn-2.png" alt="Виды работ">Lorem ipsum.</a>
</div>
<div class="img-btn">
<a href="#"><img src="img/ic_btn-3.png" alt="Виды работ">Lorem ipsum dolor.</a>
</div>
<div class="img-btn">
<a href="#"><img src="img/ic_btn-4.png" alt="Виды работ">Lorem ipsum dolor</a>
</div>
<div class="img-btn">
<a href="#"><img src="img/ic_btn-5.png" alt="Виды работ">Lorem ipsum.</a>
</div>
<div class="img-btn">
<a href="#"><img src="img/ic_btn-6.png" alt="Виды работ">lorem</a>
</div>
</div>