Здравствуйте, я решил сделать сайт по шаблону от 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>
Помогите пожалуйста разобраться, а то я буду ещё недели две сидеть над этим пунктом.
.im:hover
убратьposition: absolute
– Yuri 23 дек '16 в 18:37