4
私は、背景イメージがcoverに設定されているカラムを持っています。カラム内には、タイトル、説明、タグなどのコンテンツを保持する別のdivがあります。コンテナ内のbgイメージをぼかす
コンテンツはdisplay: none;に設定されており、背景画像にピントがあります。
背景画像の上にカーソルを置くと、背景画像がぼやけて内容が表示されます。
しかし、コンテンツもぼやけているので、背景画像をぼかされたままにして、ぼかしを取り除き、コンテンツにフォーカスを合わせる方法を理解できません。
DEMO：https://jsfiddle.net/499hes8f/3/
内容は見ることが少し難しいかもしれませんが、それはあります、ちょうど左上にマウスを移動します。
.btn-dark {
padding: 20px 0;
border: 1px solid #fff;
display: block;
margin: 0 auto;
text-decoration: none!important;
margin-top: 40px;
text-align: center;
font-size: 1vw;
}
a.btn-dark:after {
display: none!important;
}
.no-padding {
padding: 0;
}
.project {
overflow: hidden;
}
.project-bg {
height: 500px;
}
.blur:hover:not(.project-content2) {
background-repeat: no-repeat;
margin: auto;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-filter: blur(10px);
filter: blur(10px);
transform: scale(1.09);
}
.blur {
-webkit-filter: blur(0px);
filter: blur(0px);
transform: scale(1);
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.project-content2 {
margin: 0 auto;
color: #fff;
padding: 75px;
}
.project .project-content,
.project .project-content2 {
display: none;
}
.project-first .project-content,
.project-first .project-content2 {
display: block;
-webkit-filter: blur(0px);
filter: blur(0px);
z-index: 99999999999999999999999999999;
}
.project:hover .project-content,
.project:hover .project-content2 {
display: block;
-webkit-animation: fadeInFromNone 1s ease-out;
-moz-animation: fadeInFromNone 1s ease-out;
-o-animation: fadeInFromNone 1s ease-out;
animation: fadeInFromNone 1s ease-out;
-webkit-filter: blur(0px);
filter: blur(0px);
z-index: 99999999999999999999999999999999;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}<div class="col-md-6 no-padding project">
<div class="project-bg blur" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center/cover;">
<div class="project-content2">
<h2><a href="#">Through The Telescope</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed mauris nunc. Sed vel aliquet felis. Sed eget laoreet sem. Cras in sagittis felis. Aliquam sollicitudin porta est vitae volutpat. Mauris et cursus massa. Nullam ante felis, gravida
eu leo sit amet, sodales accumsan justo. Sed sit amet leo tristique, dictum mauris vitae, aliquam nibh. Curabitur a dui lectus. Ut molestie, ipsum vel lacinia auctor, odio magna pellentesque risus, vestibulum facilisis justo mi quis mi. Vivamus
semper ipsum eget tincidunt ullamcorper.</p>
<div class="tags-button hidden-xs hidden-sm">
<a href="#" class="btn btn-dark btn-lg">Tag</a>
</div>
</div>
</div>
</div>
これは機能しませんでした。ページ全体が壊れました。 – Halnex