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

子の位置を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/

グリッドを使用した 2 番目の例。画像とズーム アイコンをグリッドに配置します (この場合は順序付けされていないリスト)。

.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 に答える