1

Имеется код галереи на css3 для одностраничного сайта. Три картинки в три ряда. При нажатии картинка увеличивается поверх остальных картинок. Всё работает хорошо, но. Мне нужно что бы при наведении на картинку она покрывалась голубым полупрозрачным фоном с текстом, а уже после при нажатии разворачивалась. Но это у меня ни как не выходит реализовать. P.S. Вроде бы правильно оформил.

 /*Убираем рамку фокуса*/
 :focus {
   outline: none;
 }
 /*Основной блок*/
 .gallery {
   width: 980px;
   margin: 0 auto;
   position: relative;
 }
 /*ссылки-контейнеры*/
 .gallery a {
   margin: 0;
   padding: 10px;
   display: inline-block;
   height: 130px;
   position: relative;
   width: 300px;
 }
 /*картинки внутри ссылок*/
 .gallery a img {
   margin: 0;
   padding: 10px;
   cursor: pointer;
   display: block;
   left: 0px;
   width: 300px;
   height: 130px;
   position: absolute;
   top: 10px;
   z-index: 1;
 }
 /*ссылка получает фокус и картинка разворачивается*/
 .gallery a:focus img {
   border: none;
   margin: 0;
   padding: 0;
   border: 2px solid rgb(153, 153, 153);
   border-radius: 3px;
   cursor: default;
   height: 300%;
   width: 300%;
   position: absolute;
   z-index: 25;
   transition-duration: 0.7s;
 }
 /*положение каждой развёрнутой картинки*/
 .gallery a:focus:nth-child(3n+1) img {
   left: 0;
   top: -145px;
 }
 .gallery a:focus:nth-child(3n+2) img {
   left: -315px;
   top: -145px;
 }
 .gallery a:focus:nth-child(3n+3) img {
   left: -640px;
   top: -145px;
 }
 .gallery a:focus:nth-child(-n+3) img {
   top: 10px;
 }
 .gallery a:focus:nth-child(n+7) img {
   top: -300px;
 }
 .gallery a:focus:nth-child(n+10) img {
   top: -300px;
 }
 /*кнопка закрытия и сброса фокуса*/
 .closed {
   background-color: rgb(250, 75, 21);
   position: absolute;
   top: -5px;
   right: 20px;
   display: none;
   width: 30px;
   height: 30px;
   cursor: pointer;
   z-index: 30;
 }
 /*текст внутри кнопки закрытия*/
 .closed p {
   margin: 10px 8px;
   font-size: 10px;
   color: rgb(255, 255, 255);
   position: absolute;
 }
 /*прозрачный блок поверх развёрнутой картинки для закрытия*/
 .closed-layer {
   display: none;
   position: absolute;
   top: 100px;
   left: 100px;
   width: 800px;
   height: 400px;
   background: transparent;
   z-index: 30;
 }
 /*блоки закрытия получают фокус*/
 a:focus~.closed,
 a:focus~.closed-layer {
   display: block;
   transition-duration: 4s;
 }
<div id="bottom">
  <div class="container" id="container">
    <div class="gallery">
      <a tabindex="1">
        <img src="image/nor1.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor2.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor3.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor4.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor5.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor6.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor7.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor8.jpg">
      </a>
      <a tabindex="1">
        <img src="image/nor9.jpg">
      </a>
      <span class="closed"><p><i class="icon-cancel"></i></p></span>
      <span class="closed-layer"></span>
    </div>
  </div>
</div>

2 ответа 2

1

Основная цель, создать или создавать в каждом блоке с картинкой (теге A), с position: relative; перекрывающие элементы (полупрозрачный голубой фон и текстовый элемент) с position: absolute, и растянуть их на весь тег A. Можно текстовый элемент создать в самом блоке с голубым полупрозрачным фоном, но в таком случае, придётся мириться с влиянием полупрозрачности на текст. Изначально, перекрывающие элементы должны быть скрыты, а при срабатывании события hover на теге A - должны отображаться

Примерная реализация на чистом CSS (Живой пример):

/* Ссылки и обёртка для картинок (тег A) */
.img-link {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 130px;
}

/* Общие стили для перекрывающих элементов */
.cover-bg,
.cover-title {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Отображаем перекрывающие элементы при наведении на блок с картинкой */
.img-link:hover .cover-bg,
.img-link:hover .cover-title{
  display: block;
}

/* Полупрозрачный перекрывающий голубой фон */
.cover-bg {
  background: #77c4f0;
  -khtml-opacity: .6;
    -moz-opacity: .6;
         opacity: .6;
}

/* Перекрывающий текст */
.cover-title {
  color: #000;
  font-size: 120%;
  text-align: center;
  text-transform: uppercase;
}

Ну а с помощью JS, можно вставлять все нужные элементы перекрытия, при наведении, и приплести сюда нужные эффекты

1
  • Это оказалось настолько просто, что мне стыдно. А ведь просидел над ним пол дня.. Спасибо вам огромное.
    – Иван
    13 апр 2015 в 20:24
0

Как пример https://jsfiddle.net/apvdctg3/

далее оформить текст, сменить цвет overlay

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.