ホバーで同時に写真をぼかすことができます（JqueryまたはCss）

Question

私のウェブサイトには、私がホバーでぼかしたいいくつかの画像があります。同時にテキストも下からフェードインする必要があります。私が話していることの例を次に示します：Freeletics.com 。

これを試してみましたが、写真をぼかしてテキストにフェードインするためのアニメーションが2つありますが、ホバーアニメーションを妨げないようにテキストを配置する方法はまだありません。

Answer 1

<div class="container"> 
    <img src="http://www.pokerconnection.net/Blog/wp-content/uploads/2010/11/Liv-Boeree-poker-star-babe-girl-play.jpg"> 

    <div class="over"> 
    <p class="title">Ddey</p> 
    <p class="rayal">text over here</p> 
    </div> 
</div> 

CSS

.container { 
    height: 200px; 
    width: 300px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
} 

.container img { 
    width: 100%; 
    position: relative; 
    z-index: 1; 
} 

.over { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    z-index: 2; 
    background: rgba(0,0,0,0.2); 
    transition: all 0.3s ease-in-out; 
} 

.title { 
    margin-top: 100px; 
    color: white; 
    transition: all 0.5s ease-in-out; 
} 

.rayal { 
    opacity: 0; 
    color: white; 
    transition: all 0.5s ease-in-out; 
} 

.over:hover { 
    background: rgba(0,0,0,0.5); 
} 

W Fiddle：https://jsfiddle.net/2et84zpo/

私はあなたのためにこのフィドルを作成しました。私はその効果が似ていると思う。テキストをスタイルするだけです。応援あなたのために働くことを願っています。

Answer 2

希望の場合BLUR効果。

.wrapper { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: #000; 
 
} 
 
.image { 
 
    display: block; 
 
    transition: .2s; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 100%; 
 
    transform: translate(-50%, 0); 
 
    color: #fff; 
 
    font-size: 40px; 
 
    font-weight: 900; 
 
    white-space: nowrap; 
 
    text-shadow: 0 0 5px rgba(0, 0, 0, .5); 
 
    transition: .2s; 
 
} 
 
.wrapper:hover .image { 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    filter: blur(5px); 
 
} 
 
.wrapper:hover .text { 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<figure class="wrapper"> 
 
    <img class="image" src="http://beerhold.it/300/200"> 
 
    <figcaption class="text"> 
 
    Lorem Ipsum 
 
    </figcaption> 
 
</figure>

Answer 3

.cover{ 
 
    background: url('https://cdn.freeletics.com/images/landing_page/boxes/box_1@2x.jpg') center center no-repeat; 
 
    background-size: cover; 
 
    width: 300px; 
 
    height: 250px; 
 
    position: relative; 
 
    transition: all 500ms linear; 
 
} 
 

 
.cover span{ 
 
    text-align: center; 
 
    font-size: 30px; 
 
    text-transform: capitalize; 
 
    color: white; 
 
    opacity: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    transform: translateY(0%); 
 
    transition: all 500ms linear; 
 
} 
 

 
.cover:hover{ 
 
    background-color: rbga(0,0,0,0.5); 
 
} 
 

 
.cover:after{ 
 
    content: ''; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    position:absolute; 
 
    background-color: transparent; 
 
    transition: all 500ms linear; 
 
} 
 
.cover:hover:after{ 
 
    background-color: rgba(0,0,0,0.3); 
 
} 
 

 
.cover:hover span{ 
 
    opacity: 1; 
 
    transform: translateY(-50%); 
 
}

<div class="cover"> 
 
    <span>some random text</span> 
 
</div>

Answer 4

あなたはCSSハックを試みることができる：

.blur { 
-webkit-filter: blur(5px); 
filter: blur(5px); 
} 

と同様にAnimate.css：https://daneden.github.io/animate.css/

はチュートリアルを読むと、おそらくこのような何か：

$("#img").hover(){ 
    $('#title').animateCss('bounce'); 
} 

Psはあなたのことを確認してくださいを次のようにjQueryを通じてAnimate.cssをアクティブにする方法を学んだ：

$.fn.extend({ 
animateCss: function (animationName) { 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
    $(this).addClass('animated ' + animationName).one(animationEnd, function() { 
     $(this).removeClass('animated ' + animationName); 
    }); 
} 
}); 

これはあなたを助けました！