如何在图像悬停时产生这样的效果？

Question

我想在图像悬停http://mahno.com.ua/en/architecture 上实现这样的效果。试过这个，但是如何在悬停和显示名称上隐藏图像。我用过CSS: On hover show and hide different div's at the same time?，但没有运气。

编辑：希望在这段代码中产生这种效果

<div class="content">
<div class="content-wrap">
    <div>  
        <div>
            <h1 class="title">Architecture</h1>
        </div>
    <!--section-title end-->

        <div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/6151-fsdgsfg.gif">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/6923-KUB%207.jpg">
                </a>
            </div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/7093-3.jpg">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/1562-d.jpg">
                </a>
            </div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/5548-pddf.jpg">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/1562-d.jpg">
                </a>

            </div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/1586-fdgsfgsdfggsdfgs.jpg">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/1597-dogs.jpg">

                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/6155-Untitled-3.gif">
                </a>
            </div>
            <div>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/3405-klink-mal.jpg">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/6128-ghrt1.jpg">
                </a>
                <span class="tim">Kube house</span>
                <a href="#">
                    <img src="images/1555-dsfsdfds.jpg">
                </a>
            </div>


        </div>        <!--product-list end-->
    </div>
  </div>

Answer 1

对不起，脏代码...

img {
  display: block;
  background-color: #fff;
  transition: .2s;
  }
.nav-ul:hover img {
  opacity: 0;
  }

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}
* {
  box-sizing: border-box;
}
.nav-li {
  position: relative;
  }
.nav .tim {
  opacity: 0;
  position: absolute;
  left: 6px;
  bottom: 0;
  transition: .5s;
}
.nav:hover .tim {
  opacity: 1;
}
.nav .nav-ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.nav .nav-li {
  display: inline-block;
  font-size: 1em;
}
.nav .nav-li a {
  position: relative;
  display: block;
  margin: 0 2px;
  text-transform: uppercase;
  overflow: hidden;
}
.nav .nav-li a:before {
  box-sizing: border-box;
  transform: translateX(100%);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
}
.nav .nav-li a:after {
  box-sizing: border-box;
  transform: translateX(-100%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
}
.nav .nav-li a:hover {
  color: inherit;
  text-decoration: none;
}
.nav .nav-li a:hover:before {
  transition: .2s transform linear, .2s height linear .2s;
  transform: translateX(0);
  height: 100%;
  border-color: #1fbfac;
}
.nav .nav-li a:hover:after {
  transition: .2s transform linear .4s, .2s height linear .6s;
  transform: translateX(0);
  height: 100%;
  border-color: #1fbfac;
}

<div class="nav">
  <div class="nav-ul">
    <div class="nav-li">
      <span class="tim">Kube house</span>
      <a href="#">
        <img src="http://beerhold.it/300/300">
      </a>
    </div>
  </div>
  <div class="nav-ul">
    <div class="nav-li">
      <span class="tim">Kube house</span>
      <a href="#">
        <img src="http://beerhold.it/300/300">
      </a>
    </div>
  </div>
  <div class="nav-ul">
    <div class="nav-li">
      <span class="tim">Kube house</span>
      <a href="#">
        <img src="http://beerhold.it/300/300">
      </a>
    </div>
  </div>
</div>

Answer 2

要复制此效果，您可以检查上述网站上的元素 .no-touch .product-list .item a:hover。里面有span.title，父悬停时这个元素的不透明度从0变成1。我可以为此提供 codepen，但是在检查请求的效果后，您会发现它非常不言自明。

例如：

.feature {
  height:250px;
  width:250px;
  background:url('http://placehold.it/250x250');
  position:relative;
}
  .feature:hover {
    background:red;
  }
    .feature:hover .title {
      opacity: 1;
    }
.title {
  width:100%;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:block;
  opacity:0;
}

<div class="feature">
    <div class="title">Example Title</div>
</div>

Answer 3

试试这个。可能对你有帮助。

HTML

<ul class="demo-3">
    <li>
        <figure>
            <img src="https://lh6.ggpht.com/0d53JZiYmsBBhHv07OUeovHruEg0WvFdbhmy4iK1hyEifm6qV5dcEopPwq-Dz8eBWsxP=h900" alt="" width="100%"/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate animals that lack limbs with digits.</p>
            </figcaption>
        </figure>
    </li>
</ul>

CSS：

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

Run Code