Ребята,как сделать такой же эффект при наведении? чтобы под оригинальным изображением был зеленый прямоугольник со смещением, и на нем же(оригинале) было второе изображение и надпись.
2 ответа
Используйте псевдокласс :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>
-
-
@Александр добавил и про бордер с примером. Просто пример был в процессе написания) 18 дек 2017 в 12:20
-
-
<div class="a1-block" style=" background: url(img/Layer41.png); background-size: cover; background-position: center;" > </div> <div class="a1-block" style=" background: url(img/Layer41.png); background-size: cover; background-position: center;" > </div> <div class="a1-block" style=" background: url(img/Layer39.png); background-size: cover; background-position: center;" > </div> 18 дек 2017 в 15:41
-
Можно использовать контейнер с фоновым цветом и изображение имеющее абсолютное позиционирование.
.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>
-
-
jsfiddle.net/Lotqpbqm/1 блин,не получилось.не знаю как сделать.все прыгает 18 дек 2017 в 15:43
-
Сделай для каждого элемента обертку из div с position:relative, тогда должно быть лучше. А так сложно сказать, потому что ваш пример кода на jsfiddle отличается от того, который я привел в ответе 19 дек 2017 в 5:10