【问题标题】:Issue with hover opacity and headers悬停不透明度和标题问题
【发布时间】:2014-06-25 05:32:29
【问题描述】:

我希望我的网站具有与本网站相同的效果:Trask Industries

当右上方的图像悬停时,文本出现,黄色覆盖图像。

这是我未能在 CSS 和 Html 中使用标题和悬停不透明度重新创建的效果。在我的尝试中,标题变得不透明,而不是像在那个网站上那样突出。我也不知道如何让标题在悬停时出现和消失。

这里是jsfiddle of my attempt

.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;
}

【问题讨论】:

    标签: html css hover opacity


    【解决方案1】:

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

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

    基本上,这是更新后的代码:

    代码:

    .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;
    }
    <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>

    【讨论】:

    • 你不知道你救了我的挫败感。非常感谢!
    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 2014-03-10
      • 1970-01-01
      • 1970-01-01
      • 2013-10-31
      • 1970-01-01
      • 2012-10-10
      • 2018-01-23
      • 2021-08-10
      • 1970-01-01
      相关资源
      最近更新 更多