イメージオーバーレイにトランジション効果を与えるには？

すでに画像の背景にオーバーレイが作成されています。そのオーバーレイにトランジション効果を追加することはできませんでした。私は、オーバーレイのために（トランジション：すべての.3s簡単;）トランジションを与えたいと思います。すべてのh3、テキスト、背景オーバーレイで動作します。イメージオーバーレイにトランジション効果を与えるには？

ありがとうございます。

私の悪い英語を申し訳ありません。

コード：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
} 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #7e8287; 
 
} 
 
.floatleft { 
 
    float: left 
 
} 
 
.floatright { 
 
    float: right 
 
} 
 
.colum { 
 
    width: 1170px; 
 
    margin: 0 auto; 
 
} 
 
.fix { 
 
    overflow: hidden; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.header_area { 
 
    background: #02918c; 
 
    min-height: 60px; 
 
} 
 
.header {} .header h1 { 
 
    font-size: 26px; 
 
    font-weight: 900; 
 
    margin-top: 15px; 
 
    text-transform: uppercase; 
 
} 
 
.header a { 
 
    color: #fff; 
 
} 
 
.header a h1 span { 
 
    color: #cfc91d; 
 
} 
 
.mainmenu {} .mainmenu ul {} .mainmenu ul#nav {} .mainmenu ul#nav li { 
 
    display: inline 
 
} 
 
.mainmenu ul#nav li a { 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    padding-top: 20px; 
 
    padding-left: 50px; 
 
} 
 
.mainmenu ul#nav li a:hover {} .welcome_text_area { 
 
    background: url(../img/bg-2.jpg) no-repeat scroll center center/cover 
 
} 
 
.wel-overlay { 
 
    background: rgba(0, 0, 0, .7) 
 
} 
 
.welcome_text { 
 
    text-align: center; 
 
    color: #fff; 
 
    padding: 200px 0 
 
} 
 
.welcome_text h1 { 
 
    font-size: 68px; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    margin: 5px 0; 
 
    letter-spacing: 20px; 
 
} 
 
.welcome_text h4 { 
 
    font-size: 30px; 
 
} 
 
.welcome_text p { 
 
    font-size: 18px 
 
} 
 
.welcome_text a.know_more { 
 
    text-align: center; 
 
    background-color: #cfc91d; 
 
    display: inline-block; 
 
    padding: 15px; 
 
    color: #0b1016; 
 
    font-weight: 900; 
 
    width: 200px; 
 
    height: 50px; 
 
    margin-top: 130px; 
 
    position: relative 
 
} 
 
.welcome_text a.know_more:before { 
 
    position: absolute; 
 
    content: "}"; 
 
    top: -145px; 
 
    left: 90px; 
 
    font-size: 120px; 
 
    font-weight: 100; 
 
    color: #fdfdfd; 
 
    transform: rotate(90deg); 
 
} 
 
.promo_area { 
 
    text-align: center; 
 
    margin-bottom: 30px; 
 
} 
 
.colum {} .promo {} .promo_title, 
 
.work_title { 
 
    padding: 100px 0; 
 
} 
 
.promo_title h1, 
 
.work_title h1 { 
 
    color: #02918c; 
 
    font-size: 48px; 
 
    font-weight: 900; 
 
    padding-bottom: 60px; 
 
    position: relative 
 
} 
 
.promo_title h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    bottom: 27px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 
.promo_title p, 
 
.work_title p { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    padding: 0 115px; 
 
} 
 
.promo_title p span { 
 
    font-size: 23px; 
 
    color: #7e8287; 
 
    font-weight: 900; 
 
} 
 
.promo_list { 
 
    text-align: center; 
 
    margin-bottom: 250px; 
 
} 
 
.promo_list div:last-child { 
 
    border-right: 0 
 
} 
 
.single_list { 
 
    width: 290px; 
 
    padding: 0 15px; 
 
    border-right: 1px solid #d9dbdb 
 
} 
 
.single_list h3 { 
 
    font-size: 16px; 
 
    color: #7e8287; 
 
    margin: 34px 0; 
 
    font-weight: 900; 
 
} 
 
.single_list p { 
 
    font-size: 11px; 
 
    color: #7e8287; 
 
} 
 
.single_list img {} .service_area { 
 
    background: #f0f0e8; 
 
    position: relative 
 
} 
 
.rightimg { 
 
    position: absolute; 
 
    background: url(../img/rightimg.jpg) no-repeat scroll 0 0/cover; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    opacity: 0.3 
 
} 
 
.leftarea { 
 
    width: 590px 
 
} 
 
.service_list { 
 
    padding: 60px 60px; 
 
} 
 
.service_list h1 { 
 
    padding: 20px 0; 
 
    font-size: 46px; 
 
    color: #02918c; 
 
    font-weight: 900; 
 
    position: relative 
 
} 
 
.service_list h1:before { 
 
    content: ""; 
 
    background: url(../img/about-bg.png) no-repeat scroll 0 0; 
 
    width: 160px; 
 
    height: 10px; 
 
    position: absolute; 
 
    bottom: -12px; 
 
} 
 
.service_list p { 
 
    padding: 35px 0 
 
} 
 
.service_item .ss_list { 
 
    width: 295px; 
 
    padding-left: 60px; 
 
    padding-bottom: 30px; 
 
    text-align: left 
 
} 
 
.service_item .ss_list h3 { 
 
    padding: 20px 0; 
 
    margin-bottom: 10px; 
 
} 
 
.service_item .ss_list p { 
 
    margin-bottom: 15px; 
 
} 
 
.service_item .ss_list img { 
 
    margin-bottom: 15px; 
 
} 
 
.work_title h1 { 
 
    text-align: center 
 
} 
 
.work_title p { 
 
    max-width: 920px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.work_area { 
 
    margin: 0; 
 
} 
 
.work_slider{ 
 
    position: relative 
 
} 
 
.work_list {} 
 
.work_slider { 
 
    width: 25%; 
 
} 
 
.work_slider img { 
 
    width: 100%; 
 
} 
 

 
.work_slider:hover .slider_overlay, 
 
.work_slider:hover .slider_detail h3, 
 
.work_slider:hover .slider_detail p {display: block;} 
 

 
.slider_detail {position: absolute; width: 100%;height: 100%; left: 0;top: 0;} 
 
.slider_overlay {background: #1c9584; position: absolute; width: 80%; height: 80%; left:10%;top: 10%;opacity: .85;display: none; } 
 
.slider_detail h3 {position: relative; z-index: 9999; color: #fff; font-size: 16px; font-weight: 900; text-align: center;padding-top: 85px;display: none;} 
 
.slider_detail p {position: relative; z-index: 9999; color: #fff; font-size: 13px; text-align: center;padding: 20px 70px;display: none;}

<div class="work_area"> 
 
      <div class="colum"> 
 
       <div class="mywork"> 
 
        <div class="work_title fix"> 
 
         <h1>MY WORK</h1> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="work_list fix"> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
       <div class="work_slider floatleft"> 
 
        <img src="http://lorempixel.com/320/230" /> 
 
        <div class="slider_detail"> 
 
         <div class="slider_overlay"></div> 
 
         <h3>Title goes here</h3> 
 
         <p>onsectetur adipisicing elit, sedo eiusmod tempor incidi et dolorerserss eerhfre mag.</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

出典

2016-05-19 MD Foysal Ahamed

だけであなたのコードの*関連*パーツを投稿してください。「トランジション効果を追加できませんでした」とはどういう意味ですか？ '.classname {transition：0.3sイージーアウト; } 'はあなたにトランジション効果を与えます。 – C14L

私の間違い申し訳ありません。私はここでは新人です。正確なクラス名を教えてくれますか？ –

あなたはdisplay:none;ルールへの移行を追加することはできません。次のように、すべてをopacityに変更する必要があります。

.work_slider:hover .slider_detail h3, 
.work_slider:hover .slider_detail p 
{ 
    opacity: 1; 
} 
.work_slider:hover .slider_overlay 
{ 
    opacity: .85; 
} 
.slider_overlay 
{ 
    transition: all .3s ease; 
    opacity: 0; 
} 
.slider_detail h3 
{ 
    transition: all .3s ease; 
    opacity: 0; 
} 
.slider_detail p 
{ 
    transition: all .3s ease; 
    opacity: 0; 
}

ここでは実際の例です：ここで変更されたコードのみの口座に乗りhttps://jsfiddle.net/9skyL8rk/

出典

2016-05-19 13:49:23

すでに完了しています。しかし、公に表示するためには15の評判が必要です –

イメージオーバーレイにトランジション効果を与えるには？

答えて

関連する問題