How do I make effect like this on image hover? - html

Question

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 1

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>

Answer 2

To copy this effect you can inspect the element .no-touch .product-list .item a:hover on aforementioned site. There are span.title inside, and opacity for this element is changed from 0 to 1 on parent hovering. I can provide codepen for this, but after inspecting requested effect you will see that it is pretty self-explanatory.
For example:
.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

Try this. It may help you.
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