web-dev-qa-db-ja.com

CSSで画像を不透明にすることなくフェードする方法は？

助けてくれてありがとう、以下の解決策。

私はWeb開発に不慣れで、CSSを実践するためにWebサイトを再構築しようとしています。

問題のウェブサイトは http://www.divecarib.com です。そのホームページの画像まで下にスクロールすると、ホバーすると画像が「フェード」することがわかります。どうすればそのフェードを達成できますか？不透明度を使用すると、背景画像が透けて見えますが、これはそのWebサイトに実装されている方法ではありません。

お手伝いありがとう！

以下は私のフェードの試みです...私が間違ったパスにいるとは無関係であると私は思ったので、元の投稿にコードを含めませんでした。

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.7;
      }

---ソリューション（少なくとも私がそれをやった方法- http://jsbin.com/igahay/1/edit?html,output）----- から取得

    <div class=picSet>
            <figure class="tint">
                <p id="#p1">Student in training</p>
                <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
                <img id=pic1  src="Media/pic1.jpg" />
            </figure>
    </div>

.tint {
    position: relative;
    float: left;
    margin: 3px;
    cursor: pointer;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
}
.tint:hover:before {
    content: "";
    background: rgba(96,150,179, 0.54);
    border: 5px solid #0B689A;
    border-radius: 20px;
    margin: 3px;  
}
.tint p{
    position:absolute;
    top:20px;
    left:20px;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 0.75em;
    display: none;
    color: #0B689A;
}
 .tint:hover > p{
    display: block;
}
cssimageopacityfade
9
CZorio

背後にあるものが透けて見えなければ、要素の不透明度を弱めることはできません。

リンク先のサイトは画像の不透明度を薄くしていませんが、上部にテキストが入った半透明のレイヤーを導入しています。

画像をフェードアウトしたいが、背景を透けさせたくない場合は、画像の周りに無地の背景色でラッパーを配置できます。しかし、画像をフェードさせたり、背後にあるものを透けさせたりする方法はありません。

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}
7
Tom Kentell