Blur Overlay expand auf Schwebeflug

Question

Ich fragte mich, ob jemand mir bitte helfen kann, ich versuche, eine Unschärfe-Overlay auf Hover zu erweitern. Ich möchte, dass das Unschärfe-Div in der Mitte mit einem Titel zentralisiert wird, und dann möchte ich, dass die Unschärfe expandiert und das Hintergrundbild überlagert. Ich habe ein Bild von dem, was ich meine, aufgenommen.

Weiß jemand, wie man dies mit css3 erreicht?

jede Hilfe wäre willkommen.

Answer 1

Obwohl ein wenig ruckelt, kann dies für Sie arbeiten:

.outerdivs 
 
{ 
 
    background-color: #ddd; 
 
    background-image: url('http://loremflickr.com/400/200'); 
 
    height: 200px; 
 
    position: relative; 
 
    width: 400px; 
 
} 
 

 
.outerdivs > h3 
 
{ 
 
    color: rgb(255, 102, 2); 
 
    height: 30px; 
 
    left: 0; 
 
    line-height: 30px; 
 
    margin-top: -15px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 

 
.outerdivs .innerdivs 
 
{ 
 
    background-color: #fff; 
 
    background-image: url('http://loremflickr.com/400/200'); 
 
    background-position: center center; 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
    height: 20%; 
 
    left: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    transition: height 0.2s ease; 
 
    width: 100%; 
 
    z-index: 9; 
 
} 
 
.outerdivs .innerdivs img 
 
{ 
 
    left: 50%; 
 
    opacity: 0.8; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.outerdivs:hover .innerdivs 
 
{ 
 
    height: 100%; 
 
}

<div class="outerdivs"> 
 
    <h3>Title</h3> 
 
    <div class="innerdivs"> 
 
    <img src="http://loremflickr.com/400/200" alt="" /> 
 
    </div> 
 
</div>