CSS отзывчивый Hover ImageCaption с Zoom - PullRequest
Новая
       21

CSS отзывчивый Hover ImageCaption с Zoom

0 голосов
/ 03 февраля 2019

Я создал этот код для сетки изображений, которая отзывчива и увеличивает изображение и показывает его подпись.К сожалению, я не могу понять, как сделать Caption отзывчивым.Темное наложение с классом размытия должно быть того же размера, что и изображение, так как текст должен оставаться посередине.Но как только я меняю положение: абсолютное и / или меняю ширину и высоту на авто или на 100% элементы исчезают.

Я давно не кодировал, упускаю ли я что-то очевидное?Любая идея, как это исправить?

Пример здесь 

<div class="wrapper">
<div class="columns"> 
<div class="column">
    <img src="http://lorempixel.com/400/200/">
    <div class="caption">
        <div class="blur"></div>
        <div class="caption-text">
            <h5>Info 1</h5>
        </div>
    </div>
</div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>  
<div class="column">
    <img src="http://lorempixel.com/400/200/">
 </div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="column">
    <img src="http://lorempixel.com/400/200/">
</div>
</div>

.column{
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.column:hover .caption{
    opacity: 1;
}

.column:hover img{
opacity: 1;
transform: rotate(3deg) scale(1.15,1.15);
-webkit-transform: rotate(3deg) scale(1.15,1.15);
-moz-transform: rotate(3deg) scale(1.15,1.15);
-ms-transform: rotate(3deg) scale(1.15,1.15);
-o-transform: rotate(3deg) scale(1.15,1.15);

-moz-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
}

.column img{
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 0;
    width:100%;
}

.column .caption{
    cursor: pointer;
    position: absolute;
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
}

.column img{
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}

.column .blur{
    background-color: rgba(0,0,0,0.65);
    height: 400px;
    width: 300px;
    z-index: 5;
    position: absolute;
    top:0;
    left:0;
}

.column .caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}

.column .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 400px;
    height: 300px;
    text-align: center;
    top:100px;
}

/* Grid */
* { 
box-sizing: border-box; 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.wrapper{
max-width: 1200px;
margin:0 auto;
overflow: hidden;
}    
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin:-1.5%;

}

.column {
position: relative;
width:50%;

flex: 32%;
overflow:hidden;
margin: 5px;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}


@media screen and (max-width: 980px) {
.columns .column {

    flex-basis: 40%;
    &:nth-last-child(2) {
        margin-right: 0;
    }
    &:last-child {
        flex-basis: 100%;
        margin: 0;
    }
 }
}

@media screen and (max-width: 680px) {
.columns .column {
    flex-basis: 100%;
 }
}

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Есть ряд изменений, которые были сделаны для достижения ваших результатов, описанных в этом коде

Для вертикального центрирования я использовал flex

.column .caption-text{
    display: flex;
    align-items: center;
    justify-content: center;
...

и на вашем h5 тексте 

.column .caption-text h5{
    max-width:50%
    ...
 }

Ваш div (s), которые 

<div class="caption">
<div class="blur"></div>
<div class="caption-text">

Их высота и ширина должны быть 100%

like.column .blur{
    background-color: rgba(0,0,0,0.65);
    height: 100%;
    width: 100%;
    z-index: 5;
    position: absolute;
    top:0;
    left:0;
}
.caption{
    width:100%;
    height:100%;
}
.column .caption-text h5{
    text-transform: uppercase;
    font-size: 24px;
    z-index:99;
    max-width:50%
}

.column .caption-text{
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    top:100px;
}
0 голосов
/ 03 февраля 2019

Вы можете использовать flexbox, чтобы решить, изменив / добавив эти свойства в своем CSS: 

.column .blur {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    top: 0;  
}
.column .caption {
    width: 100%;
    height: 100%;
}
.column .caption-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

Поскольку .column .blur и .column .caption-text имеют сходства, вы можете создать class для обоих.

Окончательный результат здесь: https://jsfiddle.net/b42ehq8o

Надеюсь, это поможет.

...