Question

我在一页中并排排列了4张图像。

    <div id="imagesMain">
        <img src="http://lorempixel.com/output/nature-q-c-300-300-4.jpg">
    <div class="caption">Questa e' una prova</div>
     <img src="IMG_20140922_164619.jpg">
  <img src="IMG_20140608_181811.jpg">
    <img src="IMG_20140608_181811.jpg">
    </div>

我想为每个人创建一个悬停效果。效果应该是悬停在图像上出现的标题。每个图像的标题都不同。这是我的CSS：

#imagesMain {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: center;
}
#imagesMain img {
  height: 300px;
  width: 300px;
  vertical-align: middle;
}

.caption{
    width:300px;
    height:150px;
    background:#FFF;
    opacity:0;
}
#imageMain img:hover, .caption:hover 
{
    opacity:0.6;
    text-align:justify;
    color:#000000;
    font-size:20px;
    font-weight:700;
    font-family:"Times New Roman", Times, serif;
    padding:30px;
}

我尝试了不同的选择，但似乎没有任何效果。有谁可以帮助我解决这个问题？先感谢您，瓦尔特

Answer 1

这是根据您的要求的代码。使用CSS将多个图像叠加在悬停效果上。

＆＃13;

#imagesMain {
              padding: 0;
              margin-left: auto;
              margin-right: auto;
              margin-top: 20px;
              text-align: center;
            }
             .imagebox { 
                 position: relative;
                  height: 300px;
                  width: 300px;
                  float: left; 
                  margin: 10px;                  
             }
            .imagebox img {
              vertical-align: middle;
                  height: 300px;
                  width: 300px;
            }
            .caption{
                width:300px;
                height:150px;
                background:#FFF;
                opacity:0;   
                position: absolute;
                left: 0;
                top: 40px; 
            }
            .imagebox:hover .caption
            { 
                opacity: 0.6;
                text-align:justify;
                color:#000000;
                font-size:20px;
                font-weight:700;
                font-family:"Times New Roman", Times, serif;
                padding:30px;
            }

＆＃13;

<div id="imagesMain">
             <div class="imagebox">
                <img src="http://lorempixel.com/output/nature-q-c-300-300-4.jpg">
                 <div class="caption">Questa e' una prova</div>             
             </div>
             <div class="imagebox">
                <img src="http://lorempixel.com/output/nature-q-c-300-300-4.jpg">
                 <div class="caption">Questa e' una prova</div>             
             </div>
             <div class="imagebox">
                <img src="http://lorempixel.com/output/nature-q-c-300-300-4.jpg">
                 <div class="caption">Questa e' una prova</div>             
             </div>
             <div class="imagebox">
                <img src="http://lorempixel.com/output/nature-q-c-300-300-4.jpg">
                 <div class="caption">Questa e' una prova</div>             
             </div>
        </div>

＆＃13;

Answer 2

这是解决方案，尝试根据您的需求进行游戏，我认为这会对您有所帮助。

<div class="img-box">
  <img width="100" src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg">
  <div class="overlay">
    <div class="text">Caption 1</div>
  </div>
</div>

<div class="img-box">
  <img width="100" src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg">
  <div class="overlay">
    <div class="text">Caption 2</div>
  </div>
</div>

.img-box {
  position: relative;
  width: 50%;
}

.img-box img {
  display: block;
  width: 100%;
  height: auto;
}

.img-box:hover > .overlay {
  opacity: 1;
  cursor: pointer;  
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: red;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

https://jsfiddle.net/3af5yf3k/7/

如何在多个图像上使用悬停属性？

2 个答案: