我想在图像悬停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>
答案 0 :(得分：0)
要复制此效果，您可以在上述网站上检查元素 .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>
答案 1 :(得分：0)
抱歉，脏代码......
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>
答案 2 :(得分：0)
试试这个。它可能对你有帮助。
<强> 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)
}