smarttechy smarttechy - 3 months ago 8
CSS Question

How do I make effect like this on image hover?

I want to give effect like this on image hover http://mahno.com.ua/en/architecture. Tried this but how to hide image on hover and display name .I have used CSS: On hover show and hide different div's at the same time? but having no luck.

EDIT: Want that effect in this code

<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

Sorry, for dirty code...

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>