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

smarttechy 发表于 Dev

聪明的技术

我想在图像悬停http://mahno.com.ua/en/architecture上实现这样的效果。尝试了一下，但是如何在悬停时隐藏图像并显示名称。我使用过CSS：在悬停时同时显示并隐藏不同的div？但没有运气。

编辑：想要此代码中的效果

<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>

安德烈·费多罗夫（Andrey Fedorov）

抱歉，代码太脏了...

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>