Эффект Hover с изображениями и текстом

Я нуждаюсь в том, чтобы сделать эффект hover на thumbnails. То, что я хочу, когда мышь происходит сверху, появилось то же изображение с матовостью 70 % и текстом в мишени.

Я это делаю с bootstrap а следовательно я поместил class thumbnails img-responsive и img-circle потому что я хочу, чтобы у них была круговая форма.

HTML:

<section class="row text-center col-md-12 center-block text-center">
  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="images/1.jpg" alt="1" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/2.jpg" class="img-responsive img-circle" alt="2" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/3.jpg" class="img-responsive img-circle" alt="3" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/4.jpg" class="img-responsive img-circle" alt="4" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/5.jpg" class="img-responsive img-circle" alt="5" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/6.jpg" class="img-responsive img-circle" alt="6" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/7.jpg" class="img-responsive img-circle" alt="7" />
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="images/8.jpg" class="img-responsive img-circle" alt="8" />
      </a>
    </div>
  </div>
</section>
10
задан 14.06.2016, 16:16
2 ответа

Здесь я оставляю тебе возможную альтернативу. То, что он делает:

  • Ссылка внутри колонны кладется с относительным положением.
  • Добавляет один span с абсолютным положением, которое будет содержать текст и которое будет спрятанным.
  • span он осваивается используя преобразование translate -50 % горизонтальных и verticalemente.
  • Когда кладется мышь на ссылке, span с текстом он появится и изображение рассветут с одним opacity:0.7.

Заметь: Я заканчиваюсь догадываться, что мое решение достаточно похожее на решение rnd, различие между обоими состоит в том, что котором я предлагаю, текст только виден, когда ты помещаешь в мыши на ссылке (круг) вместо во всей ячейке.

Здесь я оставляю demo добавляя эти изменения к твоему коду:

.rings a {
  display:inline-block;
  position:relative;
}

.rings a span {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:white;
  display:none;
}

.rings a:hover { 
    background:black; 
    border-radius:50%;
}

.rings a:hover span {
  display:block;
}

.rings a:hover img {
  opacity:0.7;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="row text-center col-md-12 center-block text-center">
  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="http://lorempixel.com/200/200/animals" alt="1" />
        <span>Animals</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/nature" class="img-responsive img-circle" alt="2" />
        <span>Nature</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/people" class="img-responsive img-circle" alt="3" />
        <span>People</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/sports" class="img-responsive img-circle" alt="4" />
        <span>Sports</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/cats" class="img-responsive img-circle" alt="5" />
        <span>Cats</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/abstract" class="img-responsive img-circle" alt="6" />
        <span>Abstract</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/" class="img-responsive img-circle" alt="7" />
        <span>Random</span>
      </a>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img src="http://lorempixel.com/200/200/dogs" class="img-responsive img-circle" alt="8" />
        <span>Dogs</span>
      </a>
    </div>
  </div>
</section>
3
ответ дан 24.11.2019, 14:09
  • 1
    jjaja. хорошее разъяснение. я поместил hover на anchor, но этот занимает всю ячейку. это различие. –  rnrneverdies 14.06.2016, 17:16
  • 2
    rnd, alvaro большое спасибо!! Сейчас s и # 237; что функционирует, но я expliqu и # 233; плохо, потому что я хочу эффект матовости, но с черным цветом для того, чтобы изображение осталось достаточно темным. В этой p и # 225; gina pod и # 233; is видеть этот эффект: velvet.ee/brands . Prob и # 233; в в и # 241; adirle черный background в .rings a:hover img, но оно не функционирует –  Sabrina 14.06.2016, 20:15
  • 3
    Ты можешь делать вещь, в и # 241; adir в код Альваро этот класс: .rings a:hover { background:black; border-radius:50%;}, Если ты это хочешь м и # 225; s темный ты меняешь матовость на .rings a:hover img –  blonfu 15.06.2016, 12:32
  • 4
    @Sabrina ты можешь видеть demo с эффектом, который ты комментировал –  Alvaro Montoro♦ 15.06.2016, 12:47
  • 5
    @Sabrina он верный, это вина border-radius в :hover. Возможно решать помещая border-radius:50%; tambi и # 233; n в ссылке, в rings a. Из этой формы только он делает hover в кругу, и не в первоначальном квадрате как он происходит сейчас –  blonfu 28.06.2016, 21:42

AquГ - я оставляю тебе пример как это podrГ-схвати делать с объяснениями в CSS.

Tube, которые нужно изменять немного структуру HTML, чтобы мочь давать ему стили тексту. А именно, я добавил <div> ученик закрытого учебного заведения.

один soluciГіn responsive, который ориентирует thumbnail на <div>.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");

/* haces al div relativo, para controlar las posiciones internas */
.rings {
  position: relative;
  margin-top: 10px;
}

/* la imagen debe centrarse automaticamente */
.rings img {
  display: block;
  margin: 0 auto;
}

/* el titulo lo ubicamos en centro, pero puede moverse */
.rings .titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
}

/* cuando pones el mouse sobre el anchor, opacidad de la imagen */
.rings a:hover img {
  opacity: 0.7;
}

/* cuando pones el mouse sobre el anchor, propiedades del texto */
.rings a:hover .titulo {
  color: white;
}
<section class="row text-center col-md-12 center-block text-center">
  <div class=" col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="http://lorempixel.com/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <div class=" col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="http://lorempixel.com/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <div class=" col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="http://lorempixel.com/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
  <div class=" col-sm-6 col-md-3">
    <div class="rings">
      <a href="webdesign.html">
        <img class="img-responsive img-circle" src="http://lorempixel.com/120/120/" alt="1" />
        <div class="titulo">Texto</div>
      </a>
    </div>
  </div>
</section>
4
ответ дан 24.11.2019, 14:09

Теги

Похожие вопросы