Показать изображение поверх изображения CSS

0

Какой простой способ сделать изображение, отображающее изображение поверх изображения при наведении

используя css.. Мне нужно сделать это для моей галереи, чтобы я мог поместить как значок ZOOM

при наведении на картинку в галерее,

Мне нужно сделать это здесь:

<div class="grid-wrap">
    <div class="grid" >
        <figure ><img src="img/1-1.jpg" alt="img01"/></figure>
        <figure ><img src="img/2-2.jpg" alt="img05"/></figure>
        <figure ><img src="img/3-3.jpg" alt="img08"/></figure>
        <figure ><img src="img/4-4.jpg" alt="img02"/></figure>
        <figure ><img src="img/5-5.jpg" alt="img04"/></figure>
        <figure ><img src="img/6-6.jpg" alt="img03"/></figure>
        <figure ><img src="img/7-7.jpg" alt="img09"/></figure>
        <figure ><img src="img/8-8.jpg" alt="img06"/></figure>
        <figure ><img src="img/9-9.jpg" alt="img07"/></figure>

    </div>
</div><!-- /grid-wrap -->

Часть CSS

.grid figure{background-color: black;}
.grid figure img {display: block;width: 100%;}
.grid figure img:hover {opacity: 0.6;transition: opacity 0.3s;}

Мне нужно что-то похожее на это: jqueryrain.com/?7Oza6nhx

  • 1
    То есть вы хотите отобразить изображение, а при наведении на него показывать следующее изображение?
  • 0
    Если вы хотите, чтобы увеличенное изображение отображалось при наведении на галерею, вы можете добавить его в качестве псевдоэлемента в один из контейнеров, например .grid: before, поскольку вам нужен только один значок.
Показать ещё 2 комментария
Теги:
image

4 ответа

1

Вы можете видеть это в действии в этой скрипке
Для простоты я использовал цветные прямоугольники вместо изображений, но вы можете просто заменить изображения
HTML:

<div id="box_1" class="box">
    <div class="orange"></div>
</div>

CSS:

.box {
    position: absolute;
    width: 200px;
    height: 200px;
}
#box_1 {
    background: #ee3e64;
    top: 0;
    left: 0;
}
.orange {
    visibility: hidden;
    background: #f95b34;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 25%;
    height: 25%;
}
#box_1:hover .orange {
    visibility: visible;
}
  • 0
    не сработало, я только начал программировать, так что ... ^^
  • 0
    Кстати, вы можете PLZ редактировать мои коды, чтобы я мог скопировать пасту для тестирования? :/ Я буду признателен!
1

Вы можете просто указать элементу фигуры свой значок масштабирования с помощью фонового CSS при наведении указателя мыши.

.grid figure:hover {
    background: transparent url(images/search-128.png) no-repeat 0 0;
}

Посмотрите здесь рабочий пример с вашим кодом: jsFiddle

0

Может быть, это выстрелил в эту скрипку

<div class="grid-wrap">
<div class="grid">
    <figure>
        <img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg"/>
        <img src="http://searchengineland.com/figz/wp-content/seloads/2012/04/penguin.jpg" class="hov" alt="img01"/>
    </figure>
</div>

CSS -

figure img {
    position: absolute;
    width: 293px;
    height: 170px;
}
img.hov {
    visibility: hidden;
}
figure:hover img.hov {
    visibility: visible;
    opacity : 0.4;
    z-index:1;
}
0

Если нужно разместить знак +/zoom над существующим изображением, псевдоо может быть создано из родительского контейнера.

figure {
position:relative;
}
figure:before {
content:url(./myzoomsign.png)' and or my text';
position:absolute; 
z-index:1;/* to show on top of image */
/* top, right,bottom , left, to set where i want */
}

Пример работы с фокусом для показа, чем вы можете обновить сгенерированный контент.

  • 0
    Привет, спасибо, но мне нужно что-то похожее на это: jqueryrain.com/?7Oza6nhx :(

Ещё вопросы

Сообщество Overcoder
Наверх
Меню