Как сделать двойной фон при наведении?

291

19 декабря 2017, 16:27

Ребята,как сделать такой же эффект при наведении? чтобы под оригинальным изображением был зеленый прямоугольник со смещением, и на нем же(оригинале) было второе изображение и надпись.

Answer 1

Используйте псевдокласс :after Т.е. у вас должен быть написан следующий стиль:

.image-block:hover:after{
    position: absolute;
    z-index: -1;
    content: '';
    width: 100%;
    height:100%;
    top: 10px;
    left: 10px;
    background: 'green';    
}

Для этого псевдокласса обязательно указывается content, иначе он не будет отображаться. У image_block - позиционирование relative - это нужно для того чтобы position: absolute для псевдокласса работал относительно этого блока. z-index прописываете отрицательный, чтобы было под картинкой, а картинку - фоном.

Для того чтобы получить рамку - делаете уже псевдокласс :before у которого характеристики как и у :after за парой исключений - z-index положительный, чтобы рамка была сверху, box-sizing:border-box для того, чтобы блок не был больше из-за рамки. Ну и фон ставите прозрачный. И прописываете сам бордер, для бордера.

.image_block{ 
    position:relative; 
    width: 300px; 
    height: 180px; 
    background: url(https://www.askideas.com/media/18/Angry-Face-Animal-Funny-3D-Picture.jpg); 
    background-size: cover; 
    background-position: center;     
} 
.image_block:hover:before{ 
    position: absolute; 
    z-index: 1; 
    content: ''; 
    width: 100%; 
    height:100%; 
    top: 10px; 
    left: 10px; 
    background: rgba(0,0,0,0); 
    box-sizing:border-box; 
    border: 2px solid green; 
} 
.image_block:hover:after{ 
    position: absolute; 
    z-index: -1; 
    content: ''; 
    width: 100%; 
    height:100%; 
    top: 10px; 
    left: 10px; 
    background: #82de82;     
}

<div class="image_block"> 
 
</div>

Answer 2

Можно использовать контейнер с фоновым цветом и изображение имеющее абсолютное позиционирование.

.image { 
  position: absolute; 
  top: 0; 
  left: 0; 
  background-color: green; 
  width: 200px; 
  height: 200px; 
} 
 
.image:hover, 
.image:hover { 
  top: -10px; 
  left: -10px; 
  opacity: 1; 
} 
 
.image_text { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 200px; 
  height: 200px; 
  opacity: 0; 
  line-height: 200px; 
  text-align: center; 
} 
 
.wrapper { 
  position: relative; 
  margin: 20px; 
  background-color: red; 
  width: 200px; 
  height: 200px; 
} 
 
.wrapper:hover .image, 
.wrapper:hover .image_text { 
  top: -10px; 
  left: -10px; 
  opacity: 1; 
}

<div class="wrapper"> 
  <img class="image" src="https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_auto/fat_cat.jpg" /> 
  <div class="image_text">Котик не унывай</div> 
</div>