0

如何在 css 中的另一个图像之上获取图像？我正在尝试在网格中的每个图像顶部添加一个小放大镜图标。

在一个侧面问题上，我怎样才能摆脱我的 CSS 中的 # 并将其更改为 .

ul#grid {
  list-style: none;
  margin: 60px auto 0;
  width: 1200px; 
   }

#grid li span {
  display:inline;
  color: white;
  display:block;
  bottom:225px;
  position:relative;
  width:180px;
   }

#grid li {
  display:inline-block;
  position: relative;
  float: left;
  margin: 0 40px 75px 0px;
  display:inline;
  position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
   }

#grid:hover li {
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opactiy .3s ease-in;
   -ms-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 0.3;
      }

 #grid li img {
   margin: 0;
   width: 339px;
   height: 211px;
   position:relative;
    }

#grid:hover li:hover {
  opacity: 1;
  }

#grid img::selection { background-color: transparent; }

#hidden{
  position:absolute;
  width: 1100px;
  height:670px;
  top:0px;
  z-index:-1;
  }

HTML

 <div class="portfolio">
  <ul id="grid">   
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
 </ul></div>
<div id="hidden">

JSFIDDLE

4

3 回答 3

1

你必须改变你的立场为绝对。

于 2013-07-24T19:10:15.747 回答
1

将子位置更改为absolute，将父元素更改为relative，绝对或固定，而不是静态。

于 2013-09-05T02:56:25.020 回答
0

第一个没有网格的示例并删除了 # 引用。

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
<div class="portfolioitem">
  <a href="#">
    <img src="http://placehold.it/339x211" />
    <span>+</span>
  </a>
</div>

http://jsfiddle.net/MxtSU/3/

网格的第二个示例，将图像和缩放图标放入网格（在本例中为无序列表）：

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
<ul>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
</ul>

http://jsfiddle.net/MxtSU/4/

于 2015-06-22T09:49:05.707 回答