Блог

Главная - Вопросы по программированию - Увеличенное изображение на заднем плане, четкое изображение спереди

Увеличенное изображение на заднем плане, четкое изображение спереди

#html #css #layout #background #zooming

#HTML #css #макет #фон #масштабирование

Вопрос:

Я работаю над получением эффекта, подобного этому, с увеличенным и размытым изображением на заднем плане и таким же, но в обычном размере спереди. Как на изображении ниже. Этот эффект

Теперь у меня такая ситуация:

 .mySlides {
    display: none;
    height: 15vw;
}

.imageslide{/*
    width:100%;
    height: 100%;*/
    max-width:100%;
    max-height:100%;
    -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter:blur(2px);
  filter: blur(2px);
  
        display: block; 
} 
 <div class="mySlides fade">
  <img src="WEB-IMG/P4A_OST Cover.jpg" class="imageslide"/>
 </div>

Я хочу использовать для этого тег 2, потому что я не хочу устанавливать фон для родительского div. В любом случае, на данный момент это не проблема. Я использовал

 transform: scale(1.1);

Но эффект очень уродливый, и изображение выходит за пределы родительского. Есть предложения?

Ответ №1:

В любом случае, я получаю хороший результат, делая это.

 .imageslide{   
    max-width: 100%;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.1);
    -webkit-filter: blur(10px);
    display: block;
    padding-bottom: 600%;
    position: absolute;
    z-index: 0;
}

.cover{
    width: 13vw;
    height: 13vw;
    position: absolute;
    z-index: 5;
    
}

.mySlides {
    display: none;
    height: 15vw;
    overflow:hidden;
    position: relative;
} 
 <div class="mySlides fade">
  <img src="WEB-IMG/P4A_OST Cover.jpg" class="imageslide"/>
  <img src="WEB-IMG/P4A_OST Cover.jpg" class="cover"/>
 </div>

Метки: ,