создание меню JQuery

Я только что сделал то, что делал в проекте. Сторона HTML выглядела примерно так:

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

Затем, используя CSS:

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

Я оставил много примеров там, на CSS, чтобы вы могли видеть, как Я решил сделать этот стиль. Примечание. Я уменьшил непрозрачность, чтобы вы могли видеть через увеличительное стекло.

Надеюсь, что это поможет.

РЕДАКТ. Для уточнения вашего примера - вы можете игнорировать visibility:hidden; и убить :hover, если вы этого хотели, это было именно так, как я это сделал.

-10
задан Bharata 16 July 2018 в 12:22
поделиться