Question

我希望我的网站具有与此网站相同的效果：Trask Industries

当悬停右上角图像时，文本显示，黄色覆盖图像。

这是我无法在CSS和Html中重新创建的效果，使用标题和悬停不透明度。在我的尝试中，标题变得不透明，而不是像在该网站上那样突出。我也不知道如何使标题在悬停时显示和消失。

.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover {
    color: black;
    opacity: 0.30;
    transition: .2s;
    webkit-transition: .2s;
    -webkit-transition: all 500ms ease;
}

Answer 1

您必须将h1和h2包装在div中，然后在css中为该div设置动画。我还为内容添加了一个相同的类。这是一个更新的小提琴：

http://jsfiddle.net/bzm6T/2/

基本上，这是更新后的代码：

HTML：

<div class="container">

<a href="articleF.html" class="contents content1">
        <div>
            <h1>The Low Stakes of Modern life</h1>
                   <h2>Default 1Default 1Default 1Default 1Default 1Default 1</h2>
        </div>



</a>

<a href="articleA1.html" class="contents content2">
        <div>
            <h1>AARON SWARTZ</h1>
                 <h2>Cats Can Puuuuur</h2>
        </div>




</a>

<a href="articleA2.html" class="contents content3">
        <div>
            <h1>JOBILLY BOOP</h1>
                 <h2>Cats Can Puuuuur</h2>
        </div>




</a>

<a href="articleD.html" class="contents content4">
        <div>
            <h1>Content4</h1>
                 <h2>Cats Can Puuuuur</h2>
        </div>




</a>


    <a href="articleK1.html" class="contents content5">
    <div>
        <h1>Content5</h1>
               <h2>Cats Can Puuuuur</h2>
    </div>


   </a>
   <a href="articleK1.html" class="contents Content6">
    <div>
        <h1>Content6</h1>
               <h2>Cats Can Puuuuur</h2>
    </div>


   </a>

 </div>

CSS：

.contents:hover > div
{
  color: black;
  opacity: 1;
}

.contents div {
opacity: 0;
display: block;
width: 100%; height: 100%;
background: rgba(255,255,255,0.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

Answer 2

略有不同的方法，但与CSS过渡基本相同：FIDDLE

.holder {
    width: auto;
    margin: 10px auto;
    border: 1px solid black;
    overflow: hidden;
}
.leftdiv {
    float: left;
    background-color: blue;
    height: 100%;
    color: white;
}
.picdiv {
    float: right;
    background-color: orange;
}
.picdiv img {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.picdiv img:hover {
    opacity: 0;
}

悬停不透明度和标题问题

2 个答案: