Галерея изображений zoom + эффекты наведения CSS - PullRequest
Новая
       31

Галерея изображений zoom + эффекты наведения CSS

0 голосов
/ 29 октября 2019

Я создаю сайт с галереей изображений. Я пытаюсь создать эффект масштабирования и наведения для этих изображений. У меня нет опыта программирования, поэтому я просто беру вещи, которые нахожу, и объединяю их.

Сначала я создаю эффект масштабирования: 

.content img.image-zoom:active {
  opacity: .7;
}

.image-zoom-background {
    background: rgba(0, 0, 0, 0.90);
}


/**
 * Image Zoom Navigation Arrows 
 */

.image-zoom-navigation .left-arrow,
.image-zoom-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-zoom-navigation .left-arrow .inner-color,
.image-zoom-navigation .right-arrow .inner-color {
    fill: #fff;
}

.image-zoom-navigation .left-arrow .outer-color,
.image-zoom-navigation .right-arrow .outer-color {
    fill: #000;
    opacity: 0.2;
}

.image-zoom-navigation .close-button {  
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.image-zoom-navigation .close-button .inner-color {
    fill: #fff;
}

.image-zoom-navigation .close-button .outer-color {
    fill: #000;
    opacity: 0.2;
}

Это отлично работает, я могу увеличивать изображения. Затем я создаю эффект при наведении, где для каждого изображения будут отображаться подписи: 

.image-gallery .gallery_card > a {
    position: relative;
}

.image-gallery .gallery_card .gallery_image_caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 0rem;
    color: rgba(255, 255, 255, 1);
    align-content: center;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    opacity: 0;
}

.image-gallery .gallery_image_caption span {
    margin: auto;
    display: inline-block;
}

.image-gallery .gallery_card:hover .gallery_image_caption {
    opacity: 1;
}

body.mobile .image-gallery .gallery_card:hover .gallery_image_caption {
    opacity: 0;
}

.gallery_card {
    position: relative;
}

Это также хорошо работает, но проблема в том, что эффект масштабирования будет отключен. Мне нужно как-то объединить эти два, чтобы получить желаемый эффект, zoom + hover, но я действительно понятия не имею, как это сделать. Какие-либо предложения? Спасибо.

...