CSS 具有缩放功能的响应式悬停图片说明
CSS Responsive Hover Imagecaption with Zoom
我为图像网格制作了这段代码,它可以响应并放大图像并显示其标题。不幸的是,我无法弄清楚如何使字幕响应。带有模糊 Class 的深色叠加层应与图像大小相同,因为文本应位于中间。但是,一旦我更改 position:absolute 和/或将宽度和高度更改为自动或 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%;
}
}
你可以使用 flexbox
来解决它 changing/adding 这些属性在你的 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
希望对您有所帮助。
为了实现您的结果,我们做了很多更改,如 codepen
中所述
为了垂直居中,我使用了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;
}
我为图像网格制作了这段代码,它可以响应并放大图像并显示其标题。不幸的是,我无法弄清楚如何使字幕响应。带有模糊 Class 的深色叠加层应与图像大小相同,因为文本应位于中间。但是,一旦我更改 position:absolute 和/或将宽度和高度更改为自动或 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%;
}
}
你可以使用 flexbox
来解决它 changing/adding 这些属性在你的 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
希望对您有所帮助。
为了实现您的结果,我们做了很多更改,如 codepen
为了垂直居中,我使用了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;
}