Проблема с hover и активной ссылкой в нём

340
25 декабря 2016, 19:17

Здравствуйте, я решил сделать сайт по шаблону от wix.com, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым с opacity 0.6 где-то и в то же время что бы эта картинка была ссылкой на саму себя но в окне галереи от fancybox. У меня заливка желтым уже стоит через hover, но картинка не работает как ссылка, если я убираю hover, то ссылка становится активной и галерея работает как задумано.

Вот ссылка на шаблон сайта

Вкладка "О нас", внизу есть фото команды, они при наведении на них мышкой заливаются желтым, а блок с текстом нет, у меня это работает, но не работает ссылка в картинке на галерею как в оригинальном шаблоне.

Вот код:

.im { 
  width: 240px; 
  height: 198px; 
  margin-bottom: 5px; 
  border: none; 
  position: relative; 
} 
.im:hover { 
  transition: all .5s; 
  background: yellow; 
  content: " "; 
  opacity: 0; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
} 
div:hover .im:after { 
  opacity: .6; 
} 
.emp1, 
.empinfo1 { 
  padding-left: 10px; 
} 
.emp1 { 
  font-family: play, sans-serif; 
  margin-top: 5px; 
  padding-top: 15px; 
  background-color: #CFCFCF; 
  display: block; 
  position: absolute; 
  width: 230.2px; 
  height: 29px; 
  color: #FFFFFF; 
  font-size: 19px; 
}
<tr> 
  <td id="td1"> 
    <div id="line1block7"> 
      <div class="im"> 
        <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"> 
          <img src="images/com_1.jpg" width="240px" height="198px"> 
        </a> 
      </div> 
      <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> 
  </td> 
  </div>

Помогите пожалуйста разобраться, а то я буду ещё недели две сидеть над этим пунктом.

Answer 1

В принципе , сам блок с изображением relative и на него абсолютным позиционированием другой блок , можно просто с любым цветом и opacity, вот пример Если я вдруг не понял суть вопроса напишите и я доделаю 

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
img { 
  display: block; 
  width: 100%; 
} 
.card { 
  width: 240px; 
  margin: 20px; 
} 
.images_container { 
  position: relative; 
} 
.yellow { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: transparent; 
} 
.card:hover .yellow { 
  background: red; 
  opacity: .2; 
  cursor: pointer; 
} 
.text p:first-child { 
  font-weight: 900; 
  padding: 5px 0; 
} 
.text p:nth-of-type(2) { 
  background: lightblue; 
  font-size: 14px; 
  font-weight: 900; 
  font-style: italic; 
} 
.text p:nth-of-type(3) { 
  font-size: 16px; 
  font-style: italic; 
}
<div class="card"> 
  <div class="images_container"> 
    <img src="https://static.wixstatic.com/media/11d79d_b224ea3b545a4d6cb2e6d468e2558814.jpg/v1/fill/w_441,h_383,al_c,q_90,usm_0.66_1.00_0.01/11d79d_b224ea3b545a4d6cb2e6d468e2558814.webp" alt=""> 
    <div class="yellow"></div> 
  </div> 
  <div class="text"> 
    <p>Тамара Миронова</p> 
    <p>Менеджер по работе с клиентами</p> 
    <p>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p> 
  </div> 
</div>

Answer 2

.im:hover {
opacity: 0; /Это говорит что при наведении на im он станет полностью прозрачным (т.е. невидимым)/
}

div:hover .im:after {
opacity: .6; /В данном случае применение прозрачности применяется к псевдоклассу after который у вас нигде не обозначен в предоставленном коде, причем применяется только при наведении на div/
}

Скорее всего у вас ошибка здесь .im:hover { наверное должно быть .im:after { и при указании положения элемента достаточно двух показателей, к примеру top: 0; left: 0; если хотите центрировать элемент, то для этого используется margin

Answer 3

Всё, вчера разобрался с кодом, всё заработало как надо, спасибо всем за помощь, без вас бы не разобрался скорее всего) Вот рабочий код, может кому пригодится:

.im{ 
	width: 240px; 
	height: 198px; 
	margin-bottom: 5px; 
	border: none; 
	background: yellow; 
  
} 
.im:hover .gallery{ 
    transition:all .5s; 
    background: yellow; 
    content: " "; 
 
} 
div:hover .gallery{ 
    transition:all .5s; 
    background: yellow; 
    content: " "; 
    opacity: .6; 
}
<div id="line1block7"> 
<div class="im">	<a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"><img src="images/com_1.jpg" width="240px" height="198px"></a></div> 
<span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> 
</td> 
</div>

READ ALSO
Проблема с аутентификацией
HTML

Проблема с аутентификацией

Зарегистрировался, потом этими данными захожу, зашел не проблем, а потом когда перехожу для просмотра заказа, автоматически выходитьДа мой...

 364
Как сделать так, чтобы правая колонка всплывала вверх?
HTML

Как сделать так, чтобы правая колонка всплывала вверх?

Верстаю сайт на бутстрапеНужно сделать так, чтобы та информация, которая отображается на больших экранах в правой колонке, на мобильных устройствах...

 319
IE 11 и bootstrap 3
HTML

IE 11 и bootstrap 3

 364
Как вставить javascript в printf()
HTML

Как вставить javascript в printf()

Нужно вставить JavaScript в функцию printf()

 364