Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Проблема с hover (https://javascript.ru/forum/xhtml-html-css/66565-problema-s-hover.html)

Invert 23.12.2016 19:35

Проблема с hover
 
Здравствуйте, я решил сделать сайт по шаблону от wix.com, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым с opacity 0.6 где-то и в то же время что бы эта картинка была ссылкой на саму себя но в окне галереи от fancybox.
У меня заливка желтым уже стоит через hover, но картинка не работает как ссылка, если я убираю hover то ссылка становится активной и галлерея работает как задумано.
Вот ссылка на шаблон сайта:
http://ru.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite%2 Ftemplates%2Fhtml%2Fall%2F2&bookName=&galleryDocIn dex=7&category=all

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

Вот код HTML:
<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>


Вот код CSS:

Код:

.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;
}

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

dkv01 30.12.2016 09:51

div:hover .im:after{
opacity: .6; <=== .6 так и должно быть ?
}

рони 30.12.2016 09:58

Цитата:

Сообщение от dkv01
так и должно быть ?

ноль перед точкой указывать необязательно


Часовой пояс GMT +3, время: 18:50.