перестает работать ссылка(css)

219
14 мая 2018, 08:50

Есть блок, вот его код

Проблема: блок-ссылка и ведет на страницу, но на блок с помощью css добавлен эффект hover, при котором возможность кликнуть по ссылке пропадает, вот css код:

.service-thumbnail{ 
  display:block; 
  width:230px; 
  height:230px;   
  border:7px solid #fff; 
  box-shadow:0 0 1px 1px gray; 
  border-radius:50%; 
  background:linear-gradient(145deg,#4a35c5,#ba13c5); 
  position:relative; 
  color:transparent; 
  transition:all .5s ease; 
	margin-left: auto; 
	margin-right: auto; 
} 
.service-thumbnail:after{ 
  content:'\f0c1'; 
  font-family:fontAwesome; 
  font-size:40px; 
  line-height:1; 
  position:absolute; 
  top:calc(50% - .5em); 
  left:calc(50% - .5em); 
	z-index: 2; 
} 
.service-thumbnail img{ 
  display:block; 
  width:100%; 
  height:100%; 
  border-radius:inherit; 
  object-fit:cover; 
  object-position:center; 
  transition:inherit; 
} 
.service-thumbnail:hover{ 
  color:#fff; 
} 
.service-thumbnail:hover img{ 
  opacity:.4; 
}

Answer 1

Все верно, вы перекрываете ссылку hover блоком, вам нужно ссылку вставить в hover блок. Вот рабочий пример:

.wrapper { 
  position: relative; 
} 
 
.hoverEffect { 
  position: absolute; 
  opacity: 0; 
  color: #fff; 
  font-size: 24px; 
  transition: opacity  1s ease-in-out; 
  top: 0; 
  left: 0; 
  margin: 6px; 
  background-color: 	rgba(128,0,128, 0.6); 
 
} 
 
.wrapper img { 
  border: 1px solid #a0522d; 
  padding: 5px; 
} 
.wrapper , .wrapper img , .hoverEffect { 
  border-radius: 100%; 
  height: 175px; 
  width: 175px; 
} 
 
.wrapper:hover .hoverEffect { 
  opacity: 1; 
} 
.hoverEffect a {  
    height: 100%; 
    width: 100%; 
    color: #fff; 
    text-decoration: none; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
}
<link href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet"/> 
<div class='wrapper'> 
    <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="image"> 
    <div class='hoverEffect'> 
        <a href="https://jsfiddle.net/y2y4kdm8/"> 
             <i class="fas fa-link"></i> 
         </a> 
    </div> 
</div>

Пример на JSFiddle

READ ALSO
CSS центрирование transform: translate(-50%, -50%)
CSS

CSS центрирование transform: translate(-50%, -50%)

В CSS есть интересное преобраазование: transform: translate(-50%, -50%);Позволяет расположить элемент точно по центру экрана, если в результате применения...

 225
Помогите решить задачку по CSS + Angularjs
CSS

Помогите решить задачку по CSS + Angularjs

Задачка вроде не сложная, а таску надо решить очень срочно

 227
Как работают счетчики? [дубликат]
javascript

Как работают счетчики? [дубликат]

На данный вопрос уже ответили:

 233
JavaScript this.getAttribute is not a function [дубликат]
javascript

JavaScript this.getAttribute is not a function [дубликат]

На данный вопрос уже ответили:

 254